文章目录

一、活动页面1、要求2、效果图3、index.html4、style.css

二、改革进展与成效管理平台页面1、要求2、效果图3、index.html4、normalize.css

三、头部静态html1、要求2、效果图3、header.html4、header.css

四、课程表1、要求2、效果图3、table.html4、table.css

素材在我的主页中资源里

一、活动页面

1、要求

阅读下列说明、效果图和HTML代码，进行静态网页开发。 这个某项目中的其中一个活动页，应用html和css技术完成页面的布局。项目包含主页index.html、style.css，css和img文件夹

2、效果图

分析：

总体一个大盒子，顶部盒子固定图片和文字，添加背景颜色。下面一张图片，直接引入和作为盒子背景都可。往下奖品盒子背景颜色透明。再往下一个盒子边框为dashed虚线，部分文字特殊标记。文字在线中间，可以文字设置背景颜色后上移覆盖实线表格注意bgcolor，cellspacing，cellpadding ，消除外边线

3、index.html

4、style.css

*{

margin: 0;

padding: 0;

}

.border{

height: 740px;

width: 300px;

margin: 50px auto;

background-color: rgb(148, 239, 141);

}

.flower{

height: 50px;

width: 300px;

background-color: #00bd23;

}

.flower img{

height: 25px;

width: 25px;

margin-top: 15px;

margin-left: 10px;

}

.flower span{

font-weight: bold;

color: aliceblue;

position: relative;

bottom: 5px;

}

.border>img{

width: 300px;

}

.modelone{

width: 270px;

height: 45px;

margin-left: 20px;

margin-top: 10px;

background-color: rgb(255,255,255,0.5);

}

.modelone .p1{

width: 250px;

height: 40px;

line-height: 40px;

font-weight: bold;

margin-left: 20px;

color: green;

}

.modelone a{

color: red;

}

.modeltwo{

width: 270px;

height: 90px;

margin-left: 20px;

margin-top: 10px;

background-color: white;

border: 1px dashed red;

}

.modeltwo p{

margin:18px ;

}

.modeltwo a{

color: red;

}

.line{

width: 250px;

border: 1px solid #008000;

border-top: 1px;

margin: 0 auto;

}

.get{

display: inline-block;

width: 90px;

text-align: center;

color: #008000;

background-color: #94ef8d;

position: relative;

top: -15px;

left: 110px;

}

.table{

margin: 0px 20px 0px 20px;

color: #3d6a56;

font-weight: bold;

text-align: center;

font-size: 15px;

}

.table p{

font-size: 13px;

color: gray;

}

.table .tr1{

color: #F0F8FF;

font-weight: 400;

}

.table .tr2{

background-color: rgb(255,255,255,0.5);

}

.table td{

border: 1px solid #6dbe9a;

border-top: 0px;

border-left: 0px;

}

.table .bottom{

border-bottom: 0px;

}

.table .right{

border-right: 0px;

}

.i{

width: 300px;

}

二、改革进展与成效管理平台页面

1、要求

阅读下列说明、效果图和HTML代码，进行静态网页开发。 项目名称为“改革进展与成效管理平台”，包含首页index.html、css文件夹、img文件夹，其中，css文件夹包含normalize.css文件；img文件夹包含用到的图片。

2、效果图

3、index.html

4、normalize.css

body,h1,h2,h3,h4,h4,h6,p,ul,ol,dl,dd,input,textarea{

margin:0;/*清除外边距*/

padding:0;/*清除内边距*/

}

body{

font-family: "微软雅黑";/*设置字体为微软雅黑*/

font-size: 16px;

background-color: #fff;

overflow-x: hidden;

}

ul,ol,li{

list-style: none;/*清除列表样式*/

}

img{

display:block;/*清除图片下默认的小间隙*/

border: 0;

}

a{

margin: 0;

padding: 0;

border:0;

text-decoration: none;/*清除默认下划线*/

color: inherit;

background: transparent;

cursor: pointer;

}

input{

border: 0;

outline: none;

}

.fl{

float: left;

}

.fr{

float: right;

}

@font-face{

font-family: 'iconfont';

src: url('../fonts/iconfont.eot');

src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'),

url('../fonts/iconfont.woff2') format('woff2'),

url('../fonts/iconfont.woff') format('woff'),

url('../fonts/iconfont.ttf') format('truetype'),

url('../fonts/iconfont.svg#iconfont') format('svg');

}

.iconfont {

font-family: "iconfont" !important;

font-size: 16px;

font-style: normal;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

/*公共样式--start*/

.wrap{

width: 1200px;

margin: 0 auto;/*设置水平居中*/

}

/*顶部导航--start*/

.header{

width: 100%;

height: 178px;

}

.header .top{

width: 100%;

height: 126px;

background-color: #0c549e;

}

.header .top .logo{

padding-top: 40px;

}

.header .top .logo .name{

padding-top: 6px;

padding-left: 12px;

}

.header .top .logo .name h1{

height: 28px;

margin-bottom: 6px;

font-weight:bold;

font-size:24px;

color:#fff;

text-align: justify;

}

.header .top .logo .name h1 span{

display: inline-block;

padding-left: 100%;

}

.header .top .logo .name p{

font-weight:bold;

font-size:10px;

word-spacing:1px;

color:#fff;

}

.header .top .opt{

padding-top: 50px;

}

.header .top .opt .search{

height: 29px;

margin-right: 39px;

border:1px solid #aeb7be;/*设置边框 边框宽1px 实心线 颜色为#aeb7be*/

}

.header .top .opt .search form{

height: 29px;

}

.header .top .opt .search form input{

display: block;

width: 245px;

height: 100%;

}

.header .top .opt .search form .searchBtn{

width: 30px;

height: 29px;

background: #0c549e url(../img/search.png) no-repeat center;/*设置背景图片为 search.png，背景图片不重复，而且居中，背景颜色为#0c549e*/

}

.header .top .opt .search form .searchBtn a{

display: block;

width: 100%;

height: 100%;

}

.header .top .opt .admin{

height: 31px;

padding-left: 30px;

line-height: 31px;

color: #fff;

background: url(../img/admin.png) no-repeat 0 4px;/*设置背景图片为 admin.png，背景图片不重复，背景位置左右是0，距离上边是4px*/

}

.header .top .opt .admin a{

display: block;

width: 100%;

height: 100%;

}

.header .nav{

width: 100%;

height: 53px;

}

.header .nav .wrap{

box-shadow: 0 1px 6px #ccc;

}

.header .nav .wrap>ul{

height: 53px;

margin-left: -10px;

}

.header .nav .wrap>ul>li{

position: relative;

z-index: 99;

float: left;

width: 140px;

height: 100%;

margin-left: 10px;

line-height: 53px;

color: #636a72;

text-align: center;

transition: all .3s;/*将所有属性0.3s的过渡*/

}

.header .nav .wrap>ul>li.cur{

color: #fff;

background-color: #0c54a0;

}

.header .nav .wrap>ul>li.cur span{

border-top-color: #fff;

}

.header .nav .wrap>ul>li:hover{

color: #fff;

background-color: #0c54a0;

}

.header .nav .wrap>ul>li span{

display: inline-block;

border: 5px solid transparent;

border-top-color: #636a72;

}

.header .nav .wrap>ul>li:hover span{

border-top-color: #fff;

}

.header .nav ul li .subNav{

display: none;

position: absolute;

left: 18px;

top: 54px;

width: 86px;

border-radius: 3px;

background-color: #fff;

}

.header .nav ul li .subNav ul{

width: 100%;

}

.header .nav ul li .subNav ul li{

width: 100%;

height: 34px;

font-size: 14px;

line-height: 34px;

text-align: center;

}

.header .nav ul li.block .subNav{

left: 0;

}

.header .nav ul li.block .subNav ul li{

width: 86px;

float: left;

}

.header .nav ul li.block .subNav{

width: 172px;

}

.header .nav ul li .subNav ul li:hover{

background-color: #e7e7e7;

color: #333;

}

.header .nav ul li .tri{

display: none;

position: absolute;

left: 54px;

top: 40px;

border: 7px solid transparent;

border-bottom-color: #fff;

}

.header .nav .wrap>ul>li:hover .subNav{

display: block;

color: #333;

}

.header .nav .wrap>ul>li:hover .tri{

display: block;

}

/*顶部导航--end*/

/*位置追踪*/

.main .pos{

margin-top: 26px;

margin-bottom: 16px;

}

.main .pos ul li{

float: left;

font-size: 12px;

color: #84878c;

}

.main .pos ul li:hover a{

color: #333;

}

.main .pos ul li.mid{

margin: 0 10px;

}

/*焦点图--start*/

.banner{

position: relative;

width: 100%;

height: 482px;

overflow: hidden;

}

.banner img{

position: absolute;

top: 50%;

left: 50%;

width: 100%;

max-width: 1920px;

transform: translate(-50%,-50%);/*用transform将元素居中*/

}

/*焦点图--end*/

/*底部*/

.footer{

width: 100%;

height: 280px;

background-color: #15233d;

}

.footer .left{

position: relative;

padding-top: 88px;

}

.footer .left .contact{

position: absolute;

left: 0;

top: -32px;

width: 234px;

height: 60px;

padding-left: 66px;

font-size: 22px;

line-height: 60px;

color: #fff;

background-color: #0c54a0;

}

.footer .left .list p{

height: 40px;

font-size: 14px;

line-height: 40px;

color: #fff;

}

.footer .left .list span{

margin-right: 18px;

}

.footer .right{

padding-top: 88px;

}

.footer .right .footNav{

margin-bottom: 42px;

padding-left: 60px;

}

.footer .right .footNav ul{

height: 30px;

}

.footer .right .footNav ul li{

float: left;

height: 100%;

font-size: 12px;

line-height: 30px;

color: #fff;

}

.footer .right .footNav ul li.des{

margin: 0 18px;

font-size: 14px;

color: #737c8d;

}

.footer .right .footNav ul li:hover{

color: #737c8d;

}

.footer .right .others{

margin-bottom: 32px;

padding-left: 316px;

font-size: 0;

}

.footer .right .others span{

display: inline-block;

width: 30px;

height: 30px;

margin-left: 10px;

border-radius: 15px;

background-color: #fff;

}

.footer .right .others .iconfont{

font-size: 30px;

color: #444f63;

}

.footer .right .copyright{

font-size: 14px;

color: #fff;

}

三、头部静态html

1、要求

制作一个公用的头部静态html，现在提供的设计效果图。 项目名称为header，包含header.html、css文件夹、img文件夹，其中，css文件夹包含header.css文件；img文件夹包含h5logo.png、hotline.gif、top_02.gif、top_bg.gif图片。

2、效果图

分析：

总盒子边框有阴影内部盒子背景颜色平铺li之间放的图片隔开

3、header.html

4、header.css

*{

margin: 0;

padding: 0;

}

.head{

width: 1100px;

height: 100px;

border: 1px solid black;

margin: 50px auto;

box-shadow: 1px 5px 10px 0px ;

background-image: url(../img/top_bg.gif);

}

.img1{

position: relative;

left: 50px;

top: 25px;

}

.img2{

margin-left: 500px;

}

ul{

margin-left: 350px;

}

li{

list-style: none;

float: left;

margin: 0 5px;

}

四、课程表

1、要求

李华用html的表格打印了2019年下学期的课程表，周三有体育课标红，完成的整体效果如图。 项目名称为table，包含首页table.html、css文件夹，其中，css文件夹包含table.css文件。

2、效果图

分析：

rowspan（占几行），colspan（占几列）

3、table.html

4、table.css

.table{

margin: 50px auto;

text-align: center;

}

.red{

color: red;

}

参考文章