跟着pink老师前端入门教程-day08
二十一、案例前期铺垫
21.1 CSS属性书写顺序（重点）
建议遵循以下顺序：
1. 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
2. 自身属性：width / height / margin / padding / border / background
3. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
4. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
21.2 页面布局整体思路
为了提高网页制作的效率，布局时通常有以下的整体思路：
1. 必须确定页面的版心（可视区），我们测量可得知。
2. 分析页面中的行模块，以及每个行模块中的列模块。其实页面布局第一准则.
3. 一行中的列模块经常浮动布局, 先确定每个列的大小,之后确定列的位置. 页面布局第二准则
4. 制作 HTML 结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要.
5. 所以, 先理清楚布局结构,再写代码尤为重要. 这需要我们多写多积累
09-页面布局整体思路_哔哩哔哩_bilibili
21.3 确定版心
这个页面的版心是1200px，每个版心都要水平居中对齐，可以定义为版心为公共类：
21.4 头部制作
导航栏注意点:
实际开发中，我们不会直接用链接a 而是用 li 包含链接(li+a)的做法。
1. li+a 语义更清晰，一看这就是有条理的列表型内容。
2. 如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险）， 从而影响网站排名
注意:
1. 让导航栏一行显示, 给 li 加浮动, 因为 li 是块级元素, 需要一行显示.
2. 这个nav导航栏可以不给宽度,将来可以继续添加其余文字
3. 因为导航栏里面文字不一样多,所以最好给链接 a 左右padding 撑开盒子,而不是指定宽度
学成在线案例
html部分
学成在线
qq-leishui
精品推荐
查看全部
-
Think PHP 5.0 博客系统实战项目演练
高级 • 1125人在学习
-
Think PHP 5.0 博客系统实战项目演练
高级 • 1125人在学习
-
Think PHP 5.0 博客系统实战项目演练
高级 • 1125人在学习
-
Think PHP 5.0 博客系统实战项目演练
高级 • 1125人在学习
-
Think PHP 5.0 博客系统实战项目演练
高级 • 1125人在学习
-
Think PHP 5.0 博客系统实战项目演练
高级 • 1125人在学习
-
Think PHP 5.0 博客系统实战项目演练
高级 • 1125人在学习
-
Think PHP 5.0 博客系统实战项目演练
高级 • 1125人在学习
-
Think PHP 5.0 博客系统实战项目演练
高级 • 1125人在学习
-
Think PHP 5.0 博客系统实战项目演练
高级 • 1125人在学习
CSS部分
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
background-color: #edebeb;
/* height: 3000px; */
}
a {
text-decoration: none;
}
.header {
width: 1200px;
margin: auto;
/* background-color: #000; */
/* border: 1px solid #000; */
}
.box {
height: 42px;
/* background-color: rgb(150, 184, 214); */
margin: 30px auto;
}
.logo {
float: left;
width: 198px;
height: 42px;
background-image: url(./images/logo.png);
}
/* 导航栏*/
.nav {
float: left;
margin-left: 60px;
}
/*块级元素*/
.nav li {
float: left;
margin-left: 15px;
}
/*行内元素*/
.nav ul li a {
display: block;
height: 42px;
padding: 0 10px;
text-decoration: none;
color: #010404;
}
.nav ul li a:hover {
border-bottom: 2px solid #00a4ff;
color: #00a4ff;
}
/* 搜索框*/
.search {
float: left;
margin-left: 70px;
width: 412px;
height: 42px;
}
/*边框会撑开高度*/
.search input {
float: left;
width: 345px;
/*360-15=345*/
height: 40px;
border: 1px solid #00a4ff;
border-right: 0;
color: #bfbfbf;
font-size: 14px;
padding-left: 15px;
}
/* 两个行内块之间有默认空隙 解决方法：两个行内块都加浮动*/
/* 按钮有默认边框，需要去掉*/
.search button {
float: left;
width: 50px;
height: 42px;
background-image: url(./images/btn.png);
border: 0;
}
/* 人像*/
.user {
float: right;
margin-right: 30px;
font-size: 14px;
color: #666;
}
/* 头部结束*/
/* 测导航栏 */
.banner {
height: 421px;
background-color: #1c036c;
}
.banner .w {
height: 421px;
background: url(./images/banner2.png) no-repeat top center;
}
.w .subnav {
float: left;
/* margin-left: 260px; */
width: 190px;
height: 421px;
background: rgb(0, 0, 0, .3);
}
.subnav ul li {
height: 45px;
line-height: 45px;
padding: 0 20px;
}
.subnav ul li a {
text-decoration: none;
color: white;
}
.subnav ul li a span {
float: right;
}
.subnav ul li a:hover {
color: #00a4ff;
}
.course {
float: right;
/* 浮动的盒子不会有外边距合并的问题*/
margin-top: 50px;
width: 230px;
height: 320px;
background-color: white;
}
.course h2 {
height: 48px;
color: white;
background-color: #7ba7ea;
line-height: 48px;
font-size: 18px;
text-align: center;
}
.bd {
padding: 0 20px;
}
.course li {
padding: 15px 0;
border-bottom: 1px solid #a5a5a5;
}
.course h4 {
font-size: 16px;
color: #4e4e4e;
}
.course span {
font-size: 1cpx;
color: #a5a5a5;
}
.course .all {
display: block;
text-decoration: none;
height: 38px;
border: 1px solid #00acff;
margin-top: 5px;
text-align: center;
line-height: 38px;
color: #00a4ff;
font-size: 16px;
font-weight: 400;
}
/* 侧导航栏结束 */
/* 精品推荐 */
.goods {
height: 60px;
line-height: 60px;
background-color: #fff;
margin-top: 10px;
box-shadow: 0 2px 3px 3px rgb(0, 0, 0, .1);
}
.goods h3 {
float: left;
margin-left: 30px;
font-size: 16px;
color: #00a4ff;
}
.goods ul {
float: left;
margin-left: 30px;
}
.goods ul li {
float: left;
}
.goods ul li a {
font-size: 16px;
color: #010404;
padding: 0 30px;
border-left: 1px solid #a5a5a5;
}
.mod {
float: right;
margin-right: 30px;
font-size: 14px;
color: #00a4ff;
}
/* 精品推荐结束 */
/* 精品推荐大模块 */
.box {
margin-top: 30px;
}
.box-hd {
height: 45px;
}
.box-hd h3 {
float: left;
font-size: 20px;
color: #494949;
}
.box-hd a {
float: right;
font-size: 12px;
color: #a5a5a5;
margin-top: 10px;
margin-right: 30px;
}
/* 只要li的父级更宽，就不用担心会换行*/
.box-bd ul {
width: 1225px;
margin: 0 auto;
}
.box-bd ul li {
float: left;
width: 230px;
height: 270px;
background-color: #fff;
margin-right: 15px;
margin-bottom: 15px;
}
.box-bd ul li img {
width: 100%;
}
.box-bd ul li h4 {
margin: 20px 20px 20px 25px;
font-size: 16px;
color: #050505;
font-weight: 400;
}
.box-bd ul li .info {
margin: 0 20px 0 25px;
font-size: 12px;
color: #999;
}
.info span {
color: #ff7426;
}
/* 精品推荐大模块结束 */
/* 底部 */
.footer {
height: 415px;
/* 需要清除浮动，但是我的软件不兼容，只能设置外边距 */
margin-top: 570px;
background-color: white;
}
.footer .w {
padding-top: 35px;
}
/* 左侧 */
.copyright {
float: left;
}
.copyright p {
font-size: 12px;
color: #666;
margin: 20px 0 15px 0;
}
.copyright .app {
display: block;
width: 118px;
height: 33px;
border: 1px solid #00a4ff;
text-align: center;
line-height: 33px;
color: #00a4ff;
}
/* 右侧 */
.links {
float: right;
}
.links dl {
float: left;
margin-left: 100px;
}
.links dl dt {
font-size: 16px;
color: #333;
margin-bottom: 5px;
}
.links dl dd a {
font-size: 14px;
color: #333;
}