一.完成项目头部

木江..

已于 2022-06-16 09:48:42 修改

阅读量76

点赞数

文章标签： p2p linq 网络协议

于 2022-06-10 16:02:42 首次发布

本文链接：https://blog.csdn.net/weixin_71809786/article/details/125222745

版权

本文详细介绍了如何使用HTML标签如a, div, span, img, header等搭建网页头部，并通过CSS进行样式美化，包括文字居中、颜色、大小和宽度设置。还涉及到浮动布局、背景图片定位和图标设置。在实践中遇到字体居中问题，通过百度搜索找到解决方案。最后，文章展示了如何使用footer和div调整页脚布局，并调整字体颜色和大小，确保与原图一致。

摘要由CSDN通过智能技术生成

1.搭建头部框架（a,div,span,img,header等）

2.用css样式美化头部（文字居中，字体颜色，大小，宽高等）

3.完成项目的内容（照片设置，定点图标设置，全部，蛋糕，登录，搜索等等）

(1)需要用浮动把头部内容对齐

header *{
               float: left;
               text-align: center;
           }

（2）利用display: block;设置切换城市背景居中和美化

#cs{
               background-color:#CCCCCC;
               color: white;
               text-decoration: none;
               display: block;
               line-height: 30px;
               width: 80px;
               margin-top: 10px;
               margin-left: 10px;
           }

(3)使用定点完成图标设置和利用background-image:插入图片

.div1{
               border: white 1px solid;
               width: 30px;
               height: 20px;
               background-repeat: no-repeat;
               background-image: url("img/icon.gif");
               background-position: -125px 0px;
               margin-top: 20px;
               margin-left: 10px;
           }

4.工程所遇的问题：字体居中（用百度已解决：text-align: center;）

5，完成步骤：首先用footer页脚标签，在里面创建三个div，然后对这三个div用margin进行位置调整，在CSS中调整宽高调整到合适大小，根据要求对其中字体颜色、大小调整，最后和原图进行对比完成

项目图片