推荐设备MORE

重庆微信小程序商城—喜茶用

重庆微信小程序商城—喜茶用

行业新闻

css网页页面切图案例实例教程

日期:2021-03-21
我要分享

css网页页面切图案例实例教程


短视頻,自新闻媒体,达人种草1站服务

(总体实际效果图)

1、剖析网页页面总体构造,以下图所示,大家把网页页面分成5个一部分。

 

2、依据上图先写出HTML编码:

div id=" header " 1 /div
div id="banner" 2 /div
div id="nav" 3 /div
div id="main" 4 /div
div id="fotter" 5 /div

假如是初学者提议,在每一个DIV先用数据12345开展意味着这是第几个。

3、撰写统1款式编码。由于默认设置HTML元素是有间隔,先让这些间隔归0。随后在设定UL目录元素去掉小圆点。包含统1大家文本的尺寸。和连接文本的款式

CSS编码以下:

style type="text/css"
*{
margin:0px;
padding:0px;
}
Ul{list-style:none;}
A{color:#000;font-size:13px;text-decoration:none;}
A:hover{text-decoration:underline;}
/style

CSS款式编码解释:

*{
margin:0px;
padding:0px;
}

*意味着全部HTML元素,大家让其內外边距归0。这是刚开始时做法。等所有HTML写完,必须把这个地区依据用到HTML换为群组挑选符如 body,div,ul,li等。也便是说。大家只必须把应用的HTML开展归0便可。

Ul{list-style:none;}

让UL沒有小圆点

A{color:#000;font-size:13px;text-decoration:none;}

A:hover{text-decoration:underline;}

对于A连接开展设定,最先让A连接的4种情况更改为文本色调是黑色的,随后文本尺寸是13PX。去掉A连接的下划线

A:hover:当电脑鼠标悬停时,大家使其出現下划线

4、大家应用PS精确测量网页页面具体宽度为1000像素,随后大家为5个DIV设定统1垂直居中。

CSS编码以下:

#header,#banner,#nav,#main,#footer{
margin:0px auto;
width:1000px;
}

5、如今刚开始制作头顶部HEAD一部分,在这个一部分大家根据两步去完成。在顶属下方有1个情况。随后是企业LOGO标示

 

最先大家先把情况写出来:

编码以下:

#header{
height:102px;
background:url(images/topdi.gif) no-repeat;
}

编码解释:LOGO立即放图还可以。从网站提升角度考虑到。大家可使用以图换字方法。随后大家加上HTML编码:

放网站的题目

H1网页页面觉得最关键的题目。因此大家把LOGO放到H1里边

CSS编码:

#header h1{
height:82px;
width:231px;
background:url(images/logo.gif) no-repeat;
text-indent:⑼99px;
}

编码解释:

大家为H1先设定宽度与高宽比。随后加上情况。最终应用text-indent:⑼99px;让文本从画面缩进走。

6、制作网页页面的BANNER一部分。大家这个显示信息广告宣传的地区1般有两种状况,要末便是应用轮播图,要末放1个动漫。可是大家这个地区只必须进行1个情况随后在情况显示信息大家的广告宣传语。制作全过程。先让DIV中显示信息情况,随后在DIV里放1个段落去显示信息文本

HTML编码以下:

div id="banner"
p
争取制造行业 span 典 /span 范 br/
STRIVE FOR A MODDEL
/p
/div

CSS款式以下:

#banner{
height:268px;
background:url(images/banner.jpg) no-repeat;
}
#banner p{
color:#FFF;
padding-top:80px;
padding-left:80px;
font-size:14px;
font-weight:bold;
}

解释:1、让这个段落文本色调为白色

2、距顶与距左空1个间距。

3、设定文本尺寸与文本加粗

#banner p span{
color:#FF0;
font-size:18px;
}

解释:段落中某个字必须关键强调。能够在这个字的4周加上1个SPAN(PS:SPAN是不经意义的标识,便是以便加上款式便捷)。

7、导航栏的制作,是1个典型的ULLI目录。大家先写出HTML编码,而在大家导航栏目录之间有1个竖线分隔。

 

ul
li a href="#" divcss8主页 /a | /li
li a href="#" 有关捷福 /a | /li
li a href="#" 商品信息内容 /a | /li
li a href="#" 新闻动态性 /a | /li
li a href="#" 人力资源資源 /a | /li
li a href="#" 企业主页 /a | /li
li a href="#" 企业主页 /a | /li
li a href="#" 企业主页 /a | /li
li a href="#" 企业主页 /a /li
/ul

 

依据HTML去写CSS款式。

#nav{
height:25px;
background:#000;
}

CSS款式编码的解释:

导航栏的父元素DIV设置高宽比。随后设置情况色调为黑色

#nav ul{
list-style:none;
padding-left:10px;
}

CSS款式编码的解释:

让导航栏UL去掉默认设置小圆点。让总体UL居左空1定间距。

#nav ul li{
color:#fff;
float:left;
line-height:25px;
}

CSS款式编码的解释:

让导航栏中实际新项目文本色调改为白色,由于LI元素是块元素的。因此大家为其设定波动。这样就可以让导航栏同1行显示信息。line-height:25px;是以便让LI在导航栏竖直垂直居中。

#nav ul li a{
color:#FFF;
font-size:13px;
padding:0px 15px;
text-decoration:none;
}

CSS款式编码的解释:

设定导航栏的连接情况,为何设定两次色调,LI设定白色,最关键是以便竖线用的。而连接只能根据A这个款式开展设定。并且padding:0px 15px;这个特性是对于竖线使其在两个导航栏文本中间。

#nav ul li a:hover{
color:#FF0;
}

CSS款式编码的解释:

设定电脑鼠标悬停时。更改1下连接的色调

8、设定网页页面行为主体內容地区:在以前早已剖析过了。这是1个典型的多列垂直居中合理布局。大家是让 div id="main" 4 /div 先设定宽度,并让其垂直居中。随后在这个DIV中再嵌套循环DIV。随后让嵌套循环的DIV多列合理布局

 

HTML编码:

div
h4 企业新闻 /h4
ul
li a href="#" 这是新闻题目1 /a span 2015⑸⑴0 /span /li
省略
/ul
/div
div
h4 企业商品 /h4
dl
dt img src="images/chanpin.jpg"/ /dt
dd HD32B68S /dd
dd 隶属种别: CRT机壳 /dd
dd 名字: HD32B68S /dd
dd 访问数: 52 次 /dd
/dl
dl
dt img src="images/chanpin.jpg"/ /dt
dd HD32B68S /dd
dd 隶属种别: CRT机壳 /dd
dd 名字: HD32B68S /dd
dd 访问数: 52 次 /dd
/dl
/div

HTML编码解释:

1、 栏目名字题目。大家选用H4或H3标识,1层面有益于款式的撰写,2层面来讲。在网站提升层面,相对性较为关键的文本,在这里选用H4

2、 新闻典型的ULLI目录

3、 而右边商品。应用的是DL DT DD描述式清单。DT常常用于题目。而DD用于叙述。这样的话。大家能够觉得商品照片是题目。而商品的各个特性是叙述。

最终开展款式的撰写

#main{
clear:both;
padding:20px 0px;
}

CSS款式编码的解释:

1、 clear:both;表明消除波动。为何要写这个。是由于导航栏的LI元素写波动了。 并且以下图所示:会有1一部分空白。这样就会危害正下方网页页面內容。因此在行为主体內容上要先消除波动。

 

2、 padding:20px 0px;让行为主体內容居顶与居顶留1定间距

#main .sider{
width:370px;
margin:0px 20px;
float:left;
}

CSS款式编码的解释:

是个多列合理布局,先让左边新闻控制模块。设定宽度,而且float波动。随后设定与商品控制模块的间隔。

#main .sider h4,#main .container h4{
background:url(images/libiao.jpg) no-repeat;
text-indent:2em;
font-size:14px;
padding-bottom:5px;
}

CSS款式编码的解释:

1、 新闻的栏目名字与商品栏目是1样的,因此用到1个群组挑选符

2、 大家栏目名字小标志做成情况。让文本缩进,再操纵1下文本尺寸便可。

#main .sider ul{
list-style:none;
}
#main .sider ul li {
height:24px;
line-height:24px;
border-bottom:1px dotted #c;
}

CSS款式编码的解释:

让新闻目录设定1定高宽比,而且竖直垂直居中。在底部加1条虚线(border-bottom:1px dotted #c;

#main .sider ul li a{
font-size:13px;
text-decoration:none;
color:#666;
}

CSS款式编码的解释:

操纵新闻目录的连接情况:去掉下划线text-decoration:none;设定文本色调

#main .sider ul li a:hover{
color:#F00;
}
#main .sider ul li span{
font-size:13px;
color:#666;
padding-left:60px;
}
#main .container{
width:570px;
margin:0px 20px 0px 0px;
float:left;
}

CSS款式编码的解释:

1、 设定商品內容地区宽度与波动

2、 最终 570PX+20PX+370PX+40PX 恰好1000PX。这个地区是典型的盒实体模型。要了解。这些值全是如何得来的。

#main .container dl{
width:260px;
float:left;
}

CSS款式编码的解释:

大家选用DL清单目录,这样的话。大家的商品是并列。只必须让DL波动1下便可。也是有利于后台管理程序流程循环系统輸出內容

#main .container dl dt{
float:left;
}

CSS款式编码的解释:

让DL中的题目DT波动

#main .container dl dd{
font-size:13px;
color:#333;
text-indent:1em;
height:22px;
}

CSS款式编码的解释:

最终操纵商品叙述的文本实际特性便可以。

提议大伙儿选用DL DT DD去写

大伙儿能够尝试写1下底部信息内容

作者:css实例教程 divcss8