image.png
在做网页之前要将每个板块用不同的颜色划分清楚，越细越好，当我们将每个板块都布好，剩下的工作就只要把每个板块相应的内容往里填充即可。
image.png
使用Fireworks能够精确的获取测量的数据
image.png
一些简单的使用：
1.打开图片，将要操作的图片锁住，如下图 位图左侧小框中 点击就出现🔒，那么无论做什么操作对这张图片都不会造成影响
image.png
2.切图，选中左侧web区块的第二个功能 切片工具
image.png
3.随意截取想要获取的数据，按ctrl键并滑动鼠标滚轮即可放大图片，再按ctrl键可拖拉切线获取图片的数据。 如下图属性区可知，该切片的宽高以及X轴Y轴的数据（位于原图的数据）
image.png
该页面涉及背景图的CSS的知识
background-image: url()；引入背景图片，url里添加背景图片路径
background-position ; 决定背景图片的位置
background-repeat:;图片重复展示的方式
例：引入背景图片bac,将该图片在X轴0 和Y轴0 处展示，并且不重复展示
background-image: url(images/bac.png);
background-position: 0 0;
background-repeat:no-repeat ;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*1.清空默认边距*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
margin:0;padding:0
}
body{
font-size:12px;
font-family:"宋体";
color: #333;
}
/*头部*/
.header{
width: 777px;
height: 64px;
/*background-color:red ;*/
margin: 0 auto;
}
/*头部左侧*/
.header_left{
width: 521px;
height: 64px;
float: left;
background-color: yellow;
background-image: url(images/bac.png);
background-position: 0 0;
background-repeat:no-repeat ;
}
.header_left a{
display: inline-block;
width: 105px;
height: 64px;
}
/*头部右侧*/
.header_right{
width: 256px;
height: 64px;
float: right;
text-align: right;
line-height: 64px;
/*background-color: black;*/
}
.header_right a{
color: #CDCDCD;
text-decoration: none;
}
/*内容区*/
.content{
width: 777px;
height: 418px;
/*background-color: blue;*/
margin: 0 auto;
border: 1px solid #CDCDCD;
background-color: #FAFAFA;
}
/*内容上侧区*/
.content_top{
width: 777px;
height: 30px;
background-color: #3FB284;
padding-left: 23px;
box-sizing: border-box;
}
.content_top h1{
color: white;
font-size: 15px;
line-height: 30px;
}
/*内容下侧区*/
.content_bottom{
width: 767px;
height: 388px;
/*background-color: pink;*/
margin: 0 auto;
}
/*内容下册区的左侧*/
.article{
width: 515px;
height: 378px;
/*background-color:red ;*/
float: left;
}
/*注册字母邮箱……部分*/
.article .title{
width: 515px;
height: 67px;
/*background-color: gray;*/
padding:40px 0 0 65px;
box-sizing: border-box;
background-image:url(images/title_left.png);
background-repeat: no-repeat;
background-position: 65px 40px;
}
/*注册字母邮箱……部分 两侧实现圆角效果*/
.article .title_radius{
background-image:url(images/title_right.png);
background-repeat: no-repeat;
background-position: 390px 40px;
}
/*表单部分*/
.article .article_content{
width: 515px;
height: 310px;
/*background-color: purple;*/
padding: 20px 0 0 64px;
box-sizing: border-box;
}
/*表单的每一行*/
.article .article_content .line{
width: 330px;
height: 22px;
/*background: brown;*/
}
/*在邮箱注册等前设置 红色* */
.article .article_content .line span::before{
content: "*";
color: red;
width: 0px;
}
/*每一行表单的左侧*/
.article .article_content .line span{
width: 56px;
height: 22px;
float: left;
text-align: right;
line-height: 22px;
}
/*每一行表单的右侧*/
.article .article_content .line div{
width:264px;
height: 22px;
float: right;
text-align: right;
}
/*每一行表单下的文字描述*/
.article .article_content p{
margin-left: 75px;
margin-bottom:6px ;
margin-top: 6px;
font-size: 12px;
}
.line .special{
width: 250px;
height: 18px;
}
.line .special_yan{
width: 173px;
margin-left: 10px;
}
.line .yan{
text-align: left;
background-image: url(images/yanzheng.png);
background-repeat: no-repeat;
background-position: 190px 0px;
}
.line .yan input{
height: 19px;
}
.agree_text a{
text-decoration: none;
color: white;
}
input[type=submit]{
width: 95px;
height: 30px;
margin-left: 74px;
background: url(images/button_liji.png) no-repeat -4px -4px;
}
/*内容下册区的右侧*/
.aside{
width: 252px;
height: 388px;
/*background-color: yellow;*/
float: right;
}
.aside img{
margin: 85px 0 0 36px;
}
/*尾部*/
.footer{
width: 777px;
height: 78px;
/*background-color: green;*/
margin: 0 auto;
text-align: center;
line-height: 78px;
color: #CDCDCD;
}
.footer a{
text-decoration: none;
color: #CDCDCD;
}
</style>
</head>
<body>
<div class="header">
<div class="header_left">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
<div class="header_right">
<a href="#">了解更多</a>
|
<a href="#">反馈意见</a>
</div>
</div>
<div class="content">
<div class="content_top">
<h1>欢迎注册无限容量的网易邮箱！邮件地址可以登录使用其他网易旗下产品。</h1>
</div>
<div class="content_bottom">
<div class="article">
<div class="title">
<div class="title_radius">
<img src="images/title.png"/>
</div>
</div>
<div class="article_content">
<div class="line">
<span>邮箱地址</span>
<div>
<input type="text" value="建议使用手机号码注册" />@<select>
<option value="163.com">163.com</option>
<option value="126.com">126.com</option>
<option value="lnj.net">lnj.net</option>
</select>
</div>
</div>
<p>6~18个字符，可使用数字、下划线，字母开头</p>
<div class="line">
<span>密码</span>
<div>
<input type="password" class="special"/>
</div>
</div>
<p>6~18个字符，可使用数字、下划线，字母开头</p>
<div class="line">
<span>确认密码</span>
<div>
<input type="password" class="special"/>
</div>
</div>
<p>6~18个字符，可使用数字、下划线，字母开头</p>
<div class="line">
<span>手机号码</span>
<div>
<input type="text" class="special"/>
</div>
</div>
<p>6~18个字符，可使用数字、下划线，字母开头</p>
<div class="line">
<span>验证码</span>
<div class="yan">
<input type="text" class="special_yan"/>
</div>
</div>
<p>6~18个字符，可使用数字、下划线，字母开头</p>
<p class="agree_text">
<input type="checkbox" name="" id="" value="" />
同意
<a href="#">"服务条款"</a>
和
<a href="#">"隐私权保护政策"</a>
</p>
<input type="submit" name="" id="" value="" />
</div>
</div>
<div class="aside">
<img src="images/aside.png"/>
</div>
</div>
</div>
<div class="footer">
<p>
<a href="#">关于网易</a>
<a href="#">关于网易免费邮</a>
<a href="#">邮箱官方博客</a>
<a href="#">客户服务</a>
<a href="#">隐私政策</a>
| 网易公司版权所有 © 1997-2016</p>
</div>
</body>
</html>
我正在跟着江哥学编程,更多前端+区块链课程: www.it666.com
网友评论