html+css网页开发实战——1、头部背景和文字的制作

网页成品图：

一. 自己动手实践：
首先，把网页分为三大部分，定义了三个div，class分别为header，center，footer。然后在定义它们里面的div。代码如下：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>麦子学院实战</title><link rel="stylesheet" href="css/style2.css" /></head><body><div class="header"><div class="title"><span class="left z"><span class="shouye"><a href="">设为首页</a></span><span class="shouchang"><a href="">收藏本站</a></span></span><span class="right y"><span class="riqi"><a href="">2015年5月1日</a></span><span class="tianqi"><a href="">多云16度/30度</a></span></span></div><div class="center"></div><div class="nav"></div></div><div class="center"><div class="jianjie"></div><div class="xingwen"></div><div class="chanpintuijian"></div></div><div class="footer"></div></body>
</html>

首先，写上面的头部背景和文字制作
1、首先把通用属性在style2.css里面定义好，比如padding，margin等。然后提前把左浮动，有浮动，位置居中，消除浮动等样式定义好，代码和截图如下：

*{margin:0;padding:0}
body{font:14/28px "微软雅黑";
}
.z{float:left;}/*左对齐*/
.y{float:right;}/*右对齐*/
.wp{width:960px,margin:auto 0;}/*居中显示*/
.cl{clear:both;}/*清除浮动*/
/*header*/
/*title*/
.title{background:#303030;width:100%;height:28px;line-height:28px;/*height和line-height一致就可以使div或者span里的字体居中*/
}
.title span.left{height: 100%;width:300px;margin-left:100px;
}
.title span.right{height: 100%;width:300px;margin-right:100px;
}
.title span.shouye{width:150px;height:100%;margin-left:40px;
}
.title span.shouchang{width:150px;height:100%;margin-left:40px;
}
.title span.tianqi{width:150px;height:100%;margin-right:40px;
}
.title span.riqi{width:150px;height:100%;margin-right:40px;
}
.title span a{text-decoration: none;color:#D8D8D8;
}

难点在于以下几点：

文字在div或者span的中间。
解决办法：定义了高度height之后，同样要定义line-height。它们两个的值要一致。
几个文字的布局问题。
解决方法：首先定义两个大的span，使他们分别左浮动和右浮动，并给它们之间margin-left的值调到合适。

html代码：

<div class="title"><span class="left z"><span class="shouye"><a href="">设为首页</a></span><span class="shouchang"><a href="">收藏本站</a></span></span><span class="right y"><span class="riqi"><a href="">2015年5月1日</a></span><span class="tianqi"><a href="">多云16度/30度</a></span></span>
</div>

css代码：

.title span.left{height: 100%;width:300px;margin-left:100px;
}
.title span.right{height: 100%;width:300px;margin-right:100px;
}

然后里面小的span，同样添加上不同的类名，在css里面定义宽度，并且设置了margin-left。代码如下：

.title span.shouye{width:150px;height:100%;margin-left:40px;
}
.title span.shouchang{width:150px;height:100%;margin-left:40px;
}
.title span.tianqi{width:150px;height:100%;margin-right:40px;
}
.title span.riqi{width:150px;height:100%;margin-right:40px;
}

最后，在去掉a标签的默认样式即可，代码如下：

title span a{text-decoration: none;color:#D8D8D8;
}

成品图如下所示：

二.老师使用的方法，代码如下：

htm代码

<div class="header"><div class="top"><div class="wp"><div class="z"><span><a href="">设为首页</a></span><span><a href="">收藏本站</a></span></div><div class="y"><span><a href="">2015年5月1日</a></span><span class="mr_0"><a href="">多云16度/30度</a></span></div></div></div>

css代码

.top{width:100%;height:24px;line-height:24px;background:#303030;color:##D8D8D8;
}
.top span{margin-right:15px;
}
.top span.mr_0{margin:0px;
}
.top a{color:#D8D8D8;text-decoration: none;
}
.top a:hover{color:#F60;
}

我们之间的区别总结：

它命名为top，我命名为title。
它使用了两个大的div作为父容器，我使用了两个大的span。
比较：我觉得它做得好，div作为容器的话，因为它是行间元素，所以不用指定它的大小，一行里有多大它填多大。
它在每一个span里使用的是margin-right，我使用的时margin-left.
比较：我觉得它的更方便
它在最右边有关天气的span里加了一个类mr_0。去除了最右边的边距。

class=“mr_0”:

.top span.mr_0{margin:0px;
}

总结：老师写的布局更加简洁，作为一个新手要多学习老师的这种写法

html+css网页开发实战——1、头部背景和文字的制作相关推荐

php自定义文件后缀名,显示文件扩展名显示文件后缀名设置篇-DIV CSS网页开发准备...
显示扩展名-DIV CSS网页开发准备一.为什么需要显示扩展名? - TOP 因为很多时候我们需要辨别文件的扩展名如是.txt..js..css..php..htm..asp..aspx等文 ...
html5网页分享到朋友圈,微信公众平台网页开发实战--1.微信分享一个网页到朋友圈...
对微信的JSSDK进行封装一下,创建一份类似的文件结构,增加index.html与shareApi.js文件,结构如图3.3所示. 图3.3 3.2节文件结构另外,提醒读者一下,wxJSSDK.j ...
vue在html中写style,vue开发之style（六）（CSS页面布局之样式、背景、文字）
最近在学vue开发,并且将学习笔记与大家一起分享,前面讲了vue环境的搭建: 基于vscode的Vue前端环境搭建问题及解决办法还有vue的使用,重点就在webpack这个: vue开发之webpa ...
html5+css3网页开发实战精解,HTML5+CSS3开发实战
第1章初识HTML5 1 任务1 了解HTML5的优势 3 任务2 HTML5新增元素及属性 4 1.2.1 HTML5新增结构元素 4 1.2.2 HTML5新增网页元素 9 1.2.3 HTML ...
Android APP开发实战：界面背景图片的添加与显示
Android App,界面UI是一个很重要的东西,如果界面好,即使简单的功能,也会让用户觉得,高端大气上档次. 开发环境:Win10 64位+Android Studio 3.5.3 界面背景图片的 ...
HTML与CSS网页开发基础快速入门
目录一.HTML文档结构二.HTML常用标记三.表格标记四.表单标记五.超链接与图片标记六.HTML5新增内容七.CSS样式表一.HTML文档结构 < html >标记是 ...
微信公众平台网页开发实战-
另外,提醒读者一下,wxJSSDK.js文件的JSSDK环境配置中,需要更改一下配置参数,代码如下: 01 jsApiList: [ // 其他代码略 02 "onMenuShareTime ...
pythondjango开发实战经典_python Django网页开发实战（1）
首页电影电视剧动漫综艺音乐 MV 视频短片公开课 {% for movie in movies %} {{ movie.name }} {{ movie.disc }} {% endfo ...
【游戏开发实战】（完结）使用Unity制作像天天酷跑一样的跑酷游戏——第七篇：游戏界面的基础UI
文章目录一.前言二.导入游戏界面UI素材三.制作游戏界面UI预设四.事件管理器五.编写GameMainPanel.cs脚本六.游戏管理器添加金币逻辑七.加金币八.跳跃事件九.运行测试 ...

html+css网页开发实战——1、头部背景和文字的制作

html+css网页开发实战——1、头部背景和文字的制作相关推荐

最新文章

热门文章