注册 | 登录 | 网址 欢迎访问八百站长

【原创】网页模拟题“易起贷”步骤

2016/12/8 15:08:28 作者:站长日记 来源:八百站长_800zz.com 浏览:2019次

网页分为七部分:顶端#topbar、头部#header、幻灯#slider、热点#redian、媒体#medias、内容#main、版权#copyright


一、页面设置:

修改=》页面属性

1、修改默认字体、字号、文本颜色、背景颜色、边距均为0;

body {

  font-family: "Courier New", Courier, monospace, "微软雅黑", "宋体";

  font-size: 12px;

  color: #333;

  background-color: #FFF;

  margin: 0;

}

2、修改超链接四种状态颜色、始终无下划线(仅在变换图像时显示下划线)

a:link, a:visited { color: #333; text-decoration: none; }

a:hover, a:active { color: #03F; text-decoration: none;/*underline*/ }

3、修改标题/编码:标题“易起贷”、编码UTF-8

4、设置跟踪图像demo.jpg


二、顶端#topbar:

1、布局:有四个div,外框#topbar、内框.box、左边.left、右边.right

(1)外框#topbar:

宽度:100%、高度:40px、背景色:浅灰色

#topbar {

  width: 100%;

  height: 40px;

  background-color: #DCDCDC;

  /* 其他设置 */

  line-height: 40px;

  color: #999;

}

(2)内框.box:

宽度:1000px、边界:左右自动(居中);高度:40px

.box {

  width: 1000px;

  margin-left: auto;

  margin-right: auto;

}

#topbar .box {

  height: 40px;

}

(3)左边.left:

宽度:50%、高度:40px、浮动:左对齐

#topbar .left {

  width: 50%;

  height: 40px;

  float: left;

}

(4)右边.right:

宽度:50%、高度:40px、浮动:右对齐、文本右对齐

#topbar .right {

  width: 50%;

  height: 40px;

  float: right;

  text-align: right;

}

2、内容:左边纯文字、右边超链接,特殊文字红色、特殊链接红色

左边:您好,欢迎来到易起贷 全国免费客服热线 400-886-6789

右边:立即登录 免费注册 易起社区 帮助中心

(1)左边

选择400-886-6789,属性=》CSS=》<新CSS规则.rexian> 颜色:#F90

.rexian {

  color: #F90;

  font-weight: bold;

}

(2)右边

建立四个空链接#(<a href="#"></a>)

选择链接,新建两个链接样式

#topbar .right a {

  color: #999;

}

#topbar .right a:hover {

  color: #333;

}

(3)右边特殊链接

选择“免费注册”,属性=》CSS=》<新CSS规则a.red> 颜色:#F60

#topbar .right a.red {

  color: #F90;

  font-weight: bold;

}

#topbar .right a.red:hover {

  color: #F60;

}


三、头部#header

1、布局(同#topbar):有四个div:外框#header、内框.box、标志#logo、导航#nav

(1)外框#header

#header {

  width: 100%;

  height: 120px;

  background-color: #FBFBFB;

}

(2)内框.box

#header .box {

  height: 120px;

}

(3)标志#logo

#header #logo {

  width: 360px;

  height: 120px;/* 大小同logo图片一致 */

  float: left;

}

(4)导航#nav

#header #nav {

  width: 640px;

  height: 120px;

  float: left;

}

2、导航:包括列表的样式和超链接的样式两部分

(1)列表的样式

#nav ul { /* 初始化 */

  margin: 0;

  padding: 0;

  list-style-type: none;

  /* 调整上边界 */

  margin-top: 40px;

}

#nav ul li {

  height: 40px;

  line-height: 40px;

  font-size: 20px;

  /* 排成一行 */

  float: left;

}

(2)超链接的样式

#nav ul li a {

  display: block;  /* 显示为块 */

  margin-left: 15px;

  padding-left: 15px;

  padding-right: 15px;

}

#nav ul li a:hover {

  background-color: #036;

  color: #FFF;

}

#nav ul li a.on {

  background-color: #036;

  color: #FFF;

}


四、幻灯#slider

#slider {

  width: 100%;

  height: 400px;

  background: url(../images/banner.jpg) no-repeat center center;

}


五、热点#redian

#redian {

  width: 1000px;

  margin-left: auto;

  margin-right: auto;

  height: 40px;

  line-height: 40px;

  font-size: 14px;

}  


六、媒体#medias

1、布局:外框#medias、4个内框.media

(1)外框#medias

#medias {

  width: 1000px;

  height: 300px;

  margin-left: auto;
  margin-right: auto;

}

(2)内框.media(4个)

#medias .media {

  width: 25%;

  height: 300px;

  float: left;

  text-align: center;

}

2、内容:图像<img>(去掉前面的<p>标签)、标题<h3>、段落<p>

#medias .media img {

  margin-top: 45px;

}

#medias .media h3 {

  margin: 0;

  padding: 0;  /* 初始化 */

  height: 40px;

  line-height: 40px;

  font-size: 18px;

  font-weight: normal;

}

#medias .media p {

  margin: 0;

  padding: 0 10px;  /* 初始化 */

  line-height: 24px;

  font-size: 12px;

  text-align: left;

  color: #999;

}


七、内容#main

1、布局:外框#main、头部.hd、主体.bd

(1)外框#main

#main {

  width: 1000px;

  height: 410px;

  margin-left: auto;

  margin-right: auto;

}

(2)头部.hd

#main .hd {

  height: 70px;

  border-top: 1px solid #CCC;

}

(3)主体.bd

#main .bd {

  height: 340px;

}

2、头部:

(1)列表

#main .hd ul {

  /* 初始化 */

  margin: 0;

  padding: 0;

  list-style-type: none;

}

#main .hd ul li {

  height: 64px;

  line-height: 64px;

  font-size: 24px;

  float: left;

  padding-left: 20px;

  padding-right: 20px;

  border-top: 6px solid #FFF;

}

(2)特殊项

#main .hd ul li.on {

  border-top-color: #036;

}

3、主体

(1)插入表格:6行、7列、宽度100%、边框边距间距均为0

#main .bd th {

  background-color: #ccc;

  font-weight: normal;

  font-size: 12px;

}

#main .bd td {

  font-size: 14px;

  text-align: center;

}

(2)房.fang

.fang {

  padding: 5px 10px;

  font-size: 16px;

  color: #FFF;

  background-color: #2583CD;

  border-radius: 5px;

}

(3)等级.deng

.deng {

  width: 32px;

  height: 32px;

  line-height: 32px;

  text-align: center;

  font-size: 16px;

  color: #FFF;

  background-color: #E92D2C;

  border-radius: 16px;

}

(4)利率.lilv

.lilv {

  color: #F60;

  font-weight: bold;

}

(5)进度条.jindutiao

.jindutiao {

  width: 80px;

  height: 10px;

  margin-left: auto;

  margin-right: auto;

  border: 1px solid #CCC;

  text-align: left;

  font-size: 10px;

  line-height: 10px;

}

.jindutiao .jindu {

  width: 40%;

  height: 10px;

  background-color: #23BC6C;

  text-align: center;

}

(6)按钮.btn

a.btn {

  padding: 5px 20px;

  font-size: 18px;

  color: #FFF;

  background-color: #FE880A;

  border-radius: 5px;

}

a.btn:hover {

  background-color: #ED7D01;

}


八、版权#copyright

#copyright {

  width: 1000px;

  height: 60px;

  line-height: 60px;

  text-align: center;

  font-size: 16px;

}


上一篇: 【实训1】百度首页的制作步骤 下一篇: 没有了