3.18企业实训

最新推荐文章于 2024-03-23 00:30:00 发布

mxc201709040215

最新推荐文章于 2024-03-23 00:30:00 发布

阅读量83

点赞数

本文链接：https://blog.csdn.net/mxc201709040215/article/details/88669653

版权

左侧列表的实现：
1.
知识点：
HTML中的标签：块标签div、图片、行内标签、h5标题、列表标签

、
CSS样式中的属性：
图片边框：border
高：height 宽：width
内边距：pandding
外边距：margin
边框4个角设为圆角:border-radius
文本内容居中：text-align
字体：font-size、font-family、font-weight、color
垂直居中：line-height
取消项目符号：list-style
浮动：float
字体下划线：text-decoration
背景图片：backround
#zuozhe:图片和文本
#huoli:标题、小图标、列表
#list:标题、列表文章分类列表最新文章列表
2.（1）先将左侧的div块划分成3个区域，使用div标签

（2）作者”这个div里是包含图片和文本。
单标签、有src和alt两个属性，
成对、没有语义的标签，主要是为了方便对文本添加样式的

（3）“活力地带”这块的div，包含标题

、图片、列表标签

h1~h6标题，h1最大

（4）“文章分类、文章列表”放在一块div了，包含标题

、列表标签

当点击文章分类或者文章名称时，会有跳转这样一个操作，所以用超链接

（5）所有HTML元素可以看作盒子，span默认不具备盒子模型属性。
对图片需要设置：
内边距padding:一圈都是8px;
设置绿色的、实线的边border：1px solid #096

（6）设置作者区域中文本的样式，如果没有span标签，就没有什么标识可以针对这段文本
来设置css样式，所以span就是针对这样的情况用的
所有HTML元素可以看作盒子，span默认不具备盒子模型属性。盒子模型有padding、margin，但是span不具备这些属性，也就是设置这些是不起作用的，怎么办呢？
将span转成块元素：display:block 当然也可以从块元素转回行内元素display:inline

（7）高度肯定得设置，因为列表都是浮动的，必须设置在多大的范围里浮动
“活力地带”这个标题和其他俩标题样式一样，那怎么设置css？Class选择器

代码实现：
@charset “utf-8”;
/* CSS Document */
*{/通配符选择器/
margin:0px;
padding:0px;
}
#box{
/background-color:#F00;/
width:1024px;
height:1300px;
/margin:0 auto;/
margin:0 auto 0 auto;/上右下左/
}
/放图片，设置高度和图片一样高/
#banner{
background-color:#66F;
height:209px;
}
#menu{
background-color:#328048;/用颜色取色器取的/
height:50px;
}
/修改id为menu的、html标签下面的、ul标签的样式/
#menu ul{
list-style:none;/去掉点/
float:right;/靠右/
height:50px;
width:450px;
}