html+css网页练习一
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
文章目录
素材获取在资源里
一、活动页面
1、要求
阅读下列说明、效果图和HTML代码进行静态网页开发。
这个某项目中的其中一个活动页应用html和css技术完成页面的布局。项目包含主页index.html、style.csscss和img文件夹
2、效果图
分析
- 总体一个大盒子顶部盒子固定图片和文字添加背景颜色。
- 下面一张图片直接引入和作为盒子背景都可。
- 往下奖品盒子背景颜色透明。再往下一个盒子边框为dashed虚线部分文字特殊标记。
- 文字在线中间可以文字设置背景颜色后上移覆盖实线
- 表格注意bgcolorcellspacingcellpadding 消除外边线
3、index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div class="border">
<div class="flower">
<img src="img/back.jpg"/>
<span>花花个人赛</span>
</div>
<img src="img/banner.jpg" />
<div class="model">
<div class="modelone">
<p class="p1">我的奖品        <a> 3 </a> ></p>
</div>
<div class="modeltwo">
<p>所有电子券请在<a>10月31日</a>前使用,逾期作废</p>
</div>
</div>
<br>
<br>
<div class="line">
</div>
<h3 class="get">获奖名单</h3>
<div class="table">
<table cellspacing="0px" cellpadding="1px" align="center" width="270px" height="200px">
<tr class="tr1" bgcolor="#7ae638" height="40px">
<td>中奖用户</td>
<td>RP排名</td>
<td class="right">具体奖品</td>
</tr>
<tr class="tr2">
<td>王振民</td>
<td>1</td>
<td class="right">一年学费+<p>特别礼品</p></td>
</tr>
<tr class="tr2">
<td>谷文栋</td>
<td>23</td>
<td class="right">4个月学费+<p>特别礼品</p></td>
</tr>
<tr class="tr2">
<td>王倩倩</td>
<td>24</td>
<td class="right">2个月学费+<p>特别礼品</p></td>
</tr>
<tr class="tr2">
<td>钟尉</td>
<td>124</td>
<td class="right">100元红包+<p>特别礼品</p></td>
</tr>
<tr class="tr2">
<td>韩雅</td>
<td>345</td>
<td class="right">50元红包+<p>特别礼品</p></td>
</tr>
<tr class="tr2">
<td class="bottom">小黑子</td>
<td class="bottom">360</td>
<td class="bottom right" >30元红包+<p>特别礼品</p></td>
</tr>
</table>
</div>
<img class="i" src="img/bottomImg.jpg" />
</div>
</body>
</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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<body>
<div class="header">
<div class="top">
<div class="logo">
<div class="img">
<img src="img/logo.png" >
</div>
<div class="name">
<h1>改革进展与成效管理平台</h1>
<p>gai ge jin zhan yu cheng xiao guan li ping tai</p>
</div>
</div>
<div class="input">
<div class="input1">
<div class="input1_1">
<input type="text" name="input" />
</div>
<div class="img">
</div>
</div>
<div class="input2">
<img src="img/admin.png" >
<span>工作平台</span>
</div>
</div>
</div>
<div class="cata">
<ul>
<li>首页</li>
<li>成果展示</li>
<li>改革部署</li>
<li>改革动态</li>
<li>督查动态</li>
<li>区县党建</li>
</ul>
</div>
</div>
<div class="body">
<div class="contact">
<span>联系我们</span>
</div>
</div>
<div class="last">
<div class="left">
<img src="./img/admin.png" align="center">
<span>+86123456789 123456789</span>
<br>
<img src="./img/admin.png" >
<span>+86123456789 123456789</span>
<br>
<img src="./img/admin.png" >
<span>+86123456789 123456789</span>
<br>
<img src="./img/admin.png" >
<span>+86123456789 123456789</span>
</div>
<div class="right">
<ul>
<li>首页</li>
<li>|</li>
<li>决策</li>
<li>|</li>
<li>力度</li>
<li>|</li>
<li>督察</li>
<li>|</li>
<li>审核</li>
<li>|</li>
<li>民意</li>
</ul>
<div class="clear">
</div>
<br>
<img class="img1" src="img/admin.png" >
<img src="img/admin.png" >
<img src="img/admin.png" >
<p>©dsdsdsdsdsdsdsdsdsdsds</p>
</div>
</div>
</body>
</html>
4、normalize.css
*{
margin: 0px;
padding: 0px;
}
/* 顶部导航 */
.header{
width: 1500px;
height: 180px;
margin: 0 auto;
}
.header .top{
width: 100%;
height: 130px;
background-color: #0c549e;
}
.header .top .logo{
width: 800px;
height: 100%;
float: left;
}
.header .top .logo .img{
float: left;
width: 90px;
margin:40px 0px 0px 150px;
}
.header .top .logo .name{
float: left;
margin:40px 0px 0px 0px;
}
.header .top .logo .name h1{
color: white;
letter-spacing: 10px;
}
.header .top .logo .name p{
font-size: 15px;
font-weight: bold;
color: white;
word-spacing: 10px;
}
.header .top .input{
width: 700px;
height: 100%;
float: left;
}
.header .top .input .input1{
float: left;
width: 250px;
height: 100%;
margin: 50px 0px 0px 150px;
}
.header .top .input .input1 .input1_1{
float: left;
}
.header .top .input .input1 input{
width: 200px;
height: 25px;
}
.header .top .input .input1 .img{
float: left;
width: 26px;
height: 26px;
border: 1px solid white;
background: url(../img/search.png) no-repeat 5px;
}
.header .top .input .input2{
width: 200px;
height: 100%;
float: left;
margin: 55px 0px 20px 50px;
}
.header .top .input .input2 span{
font-size: 15px;
color: white;
position: absolute;
}
.header .cata{
width: 1500px;
height: 50px;
}
.cata ul{
margin-left: 150px;
}
.cata li{
height: 50px;
width: 100px;
float: left;
list-style: none;
font-size: 25px;
line-height: 50px;
text-align: center;
margin: 0 30px;
}
li:hover{
color: white;
background-color: #0C549E;
}
.body{
width: 1500px;
height: 450px;
background: url(../img/banner.jpg);
background-size: 100% 800px;
background-position: center;
margin: 0 auto;
position: relative;
}
.contact{
width: 200px;
height: 50px;
line-height: 50px;
background-color: #0C549E;
position: absolute;
left: 150px;
bottom: -25px;
}
.contact span{
font-size: 18px;
font-weight: bold;
color: white;
margin-left: 20px;
}
.last{
width: 1500px;
height: 300px;
border: 1px solid black;
margin: 0 auto;
background-color: #15233d;
}
.left{
width: 500px;
padding: 50px 0px 0px 100px;
float: left;
}
.left span{
color: white;
display: inline-block;
margin-left: 30px;
margin-top: 30px;
}
.right{
width: 500px;
height: 100%;
float: left;
padding-left: 400px;
}
.right ul{
margin-left: 100px;
}
.right li{
color: white;
font-size: 15px;
float: left;
list-style: none;
margin: 100px 0px 0px 10px;
}
.clear{
clear: left;
}
.right .img1{
margin-left: 330px;
}
.right p{
color: white;
font-size: 15px;
margin-left: 220px;
margin-top: 20px;
}
三、头部静态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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<link rel="stylesheet" href="css/header.css" type="text/css" />
<body>
<div class="head">
<img class="img1" src="img/h5logo.png" >
<img class="img2" src="img/hotline.gif" >
<ul>
<li>HOME</li>
<li><img src="img/top_02.gif" ></li>
<li>HTML5</li>
<li><img src="img/top_02.gif" ></li>
<li>CSS3</li>
<li><img src="img/top_02.gif" ></li>
<li>GEGE</li>
<li><img src="img/top_02.gif" ></li>
<li>JQUERY</li>
<li><img src="img/top_02.gif" ></li>
<li>JS</li>
<li><img src="img/top_02.gif" ></li>
<li>JAVA</li>
<li><img src="img/top_02.gif" ></li>
<li>C</li>
<li><img src="img/top_02.gif" ></li>
<li>LINUX</li>
<li><img src="img/top_02.gif" ></li>
<li>CENTOS</li>
</ul>
</div>
</body>
</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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<link rel="stylesheet" type="text/css" href="css/table.css"/>
<body>
<table class="table" border="1" cellspacing="2px" cellpadding="3px" width="500px">
<tr>
<th colspan="6">2019年下学期课程表</th>
</tr>
<tr>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>周末</th>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td class="red">英语</td>
<td>语文</td>
<td>英语</td>
<td rowspan="3">休息</td>
</tr>
<tr>
<td>数学</td>
<td>历史</td>
<td class="red">语文</td>
<td>数学</td>
<td>语文</td>
</tr>
<tr>
<td>政治</td>
<td>语文</td>
<td class="red">体育</td>
<td>英语</td>
<td>数学</td>
</tr>
</table>
</body>
</html>
4、table.css
.table{
margin: 50px auto;
text-align: center;
}
.red{
color: red;
}