页面实战![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/81a134a8943f09b4ea54591ad3371803.png#pic_center)
准备工作
常见的图片格式
PSD 文件对前端工程师而言,最大的优势是:
- 复制文字
- 获得图片
- 测量大小和距离
CSS 属性书写顺序(重要)
CSS 的书写顺序会影响到浏览器的渲染性能,书写顺序记忆套路如下:
- 找位置 —— 标准流、浮动、定位
- 圈地盘 —— 宽高、间距、边框、背景
- 定内容 —— 文本、颜色、下划线、对齐、文本换行
- 做点缀 —— 鼠标形状、边框圆角、阴影、文本阴影
页面布局整体思路
- 确认版心,居中可视区域,需要测量;
- 确认行模块(父级标准流)和列模块(子级浮动);
- 从上到下逐一完成行模块,循环重复以下三步,直到页面完成:
- 分析确认每个列的大小(width & height),再确认列的位置 (margin & padding);
- 制作 HTML 结构,浏览确认结构正确。
Header 区域制作
标题确定版心
/* 版心 */
.w {
width: 1200px;
margin: 0 auto;
}
header区域示例代码:
<!-- 头部区域开始 -->
<div class="header w">
<div class="logo">
<img src="./images/logo.png" alt="学成在线" title="学成在线">
</div>
<!-- nav -->
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">职业规划</a></li>
</ul>
</div>
<!-- search -->
<div class="search">
<input type="tex" placeholder="输入关键词">
<button></button>
</div>
<!-- user -->
<div class="user">
<img src="./images/user.png" alt="">
qq-litao
</div>
</div>
<!-- 头部区域结束 -->
header区域CSS:
/* 头部区域开始 */
.header {
height: 70px;
padding-top: 30px;
/* background-color: yellow; */
}
.logo {
float: left;
}
.nav {
float: left;
margin-left: 70px;
}
.nav ul li {
float: left;
margin-right: 20px;
}
.nav li a {
display: block;
padding: 10px;
font-size: 18px;
color: #050505;
}
.nav li a:hover {
border-bottom: 2px solid #00a4ff
}
.search {
float: left;
margin-left: 65px;
}
.search input {
float: left;
width: 345px;
height: 38px;
padding-left: 15px;
border: 1px solid #00a4ff;
font-size: 12px;
}
.search button {
float: left;
width: 50px;
height: 40px;
background: url(../images/btn.png);
/* 去掉button默认的边框 */
border: 0;
}
.user {
float: left;
margin-left: 30px;
padding-top: 4px;
height: 33px;
/* background-color: red; */
font-size: 14px;
color: #666;
}
/* 头部区域结束 */
header区域总结
在搭建结构时,行模块(标准流父盒子)通常使用多类名,其中:
第 1 个类名是盒子名称,用于在 CSS 中定义该父盒子的具体样式;
第 2 个类名是版心类,用于统一约束父级盒子的宽度并居中显示。
在实际开发中,导航栏不会直接用 a 标签,而是会用 li 标签包裹 a 标签,原因:
li+a 语义更清晰;
如果直接用 a 会被搜索引擎嫌弃 —— 堆砌关键字,严重的会被降权,影响网站排名。
为了方便页面扩展,在布局导航栏时不需要指定宽度,以方便后续增加新的导航栏。
Banner 区域制作
banner 区域的大小和位置:
大小:通栏 * 420px;
版心位置:水平居中。
Banner区域示例代码:
<!-- banner开始 -->
<div class="banner">
<div class="w">
<div class="subnav">
<ul>
<li><a href="#">前端开发<em>></em></a></li>
<li><a href="#">后端开发<em>></em></a></li>
<li><a href="#">移动开发<em