day001 HTML&CSS知识合辑及实战案例—03
程序员文章站
2022-05-01 22:39:43
...
案例1：注册页面(html+css)
效果展示：
代码实现：HTML+CSS(由于样式简单所以使用内部样式表)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<style>
/*不会因为盒子内元素的大小变化而使盒子的大小发生变化*/
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
/*给整体加背景图片，不重复，背景居中显示，内边距30px*/
body{
background: url("img/register_bg.png") no-repeat center;
padding-top: 30px;
}
/*给中间的注册部分，设置宽、高、背景色、边框，并使其左右居中，顶部内边距为20px*/
.rg_layout{
width: 900px;
height: 500px;
background-color: white;
border: 8px solid #EEEEEE;
margin: auto;
padding-top: 20px;
}
/*左边样式*/
/*左边的内容向左浮动，并且外边距20px*/
.re-left{
float: left;
margin: 20px;
}
/*给第一个段落“新用户注册”设置字体颜色、字号*/
.re-left > p:first-child{
color: #FFD026;
font-size: 20px;
}
/*给第二个段落“USER REGISTER”设置字体颜色、字号*/
.re-left > p:last-child{
color: #A6A6A6;
font-size: 20px;
}
/*中间样式*/
/*中间的内容也向左浮动，加一个边框是为了看得更明显*/
.re-center{
float: left;
/*border:1px solid red;*/
}
/*表格中的左边部分，设置宽、高、右对齐*/
.td-left{
width: 100px;
height: 45px;
text-align: right;
}
/*表格中的右边部分，设置与左边的距离为50px*/
.td-right{
padding-left: 50px;
}
/*将右边单元格中的输入框，设置宽高、圆角边框、给文字设置左边内边距*/
#username,#password,#email,#name,#tellphone,#birthday,#checkcode{
width: 251px;
height: 32px;
border: 1px solid #A6A6A6;
border-radius: 5px;
padding-left: 10px;
}
/*给验证码输入框单独设置宽度*/
#checkcode{
width: 140px;
}
/*给验证码图片设置高度，并且竖直方向居中*/
#img-check{
height: 32px;
vertical-align: middle;
}
/*注册按钮，设置宽高、背景色、边框*/
#btn_sub{
width: 150px;
height: 40px;
background-color: #FFD026;
border:1px solid #FFD026;
}
/*右边样式*/
/*右边的内容享有浮动，并设置外边距*/
.re-right{
float: right;
margin: 15px;
}
/*右边的字体尺寸*/
.re-right > p:first-child{
font-size: 15px;
}
/*给有右边的超链接加颜色*/
.re-right p a {
color: pink;
}
</style>
</head>
<body>
<!--将整个注册页面包裹在一个div中，这个div又被分为3个部分-->
<div class="rg_layout">
<!--第1个div : 左边部分-->
<div class="re-left">
<p>新用户注册</p>
<p>USER REGISTER</p>
</div>
<!--第2个div : 中间部分-->
<div class="re-center">
<!--中间的部分是需要提交数据的输入框，所以用form标签包裹-->
<form action="#" method="post">
<!--在整体相当于一个表格，总共有9行，每一行有2个单元格-->
<table>
<!--第1行-->
<tr>
<td class="td-left"><label for="username">用户名</label></td>
<td class="td-right"><input type="text" placeholder="请输入用户名" name="username" id="username"></td>
</tr>
<!--第2行-->
<tr>
<td class="td-left"><label for="password">密码</label></td>
<td class="td-right"><input type="password" placeholder="请输入密码" name="password" id="password"></td>
</tr>
<!--第3行-->
<tr>
<td class="td-left"><label for="email">Email</label></td>
<td class="td-right"><input type="email" placeholder="请输入邮箱" name="email" id="email"></td>
</tr>
<!--第4行-->
<tr>
<td class="td-left"><label for="name">姓名</label></td>
<td class="td-right"><input type="text" placeholder="请输入姓名" name="name" id="name"></td>
</tr>
<!--第5行-->
<tr>
<td class="td-left"><label for="tellphone">手机号</label></td>
<td class="td-right"><input type="number" placeholder="请输入手机号" name="tellphone" id="tellphone"></td>
</tr>
<!--第6行-->
<tr>
<td class="td-left"><label>性别</label></td>
<td class="td-right">
<input type="radio" name="gender" value="male">男
<input id="female_radio" type="radio" name="gender" value="female">女
</td>
</tr>
<!--第7行-->
<tr>
<td class="td-left"><label for="birthday">出生日期</label></td>
<td class="td-right"><input type="date" name="birthday" id="birthday"></td>
</tr>
<!--第8行-->
<tr>
<td class="td-left"><label for="checkcode">验证码</label></td>
<td class="td-right"><input type="text" placeholder="请输入验证码" name="checkcode" id="checkcode">
<img id="img-check" src="img/verify_code.jpg" alt="验证码"></td>
</tr>
<!--第9行-->
<tr>
<td class="td-left"></td>
<td class="td-right"><input type="submit" id="btn_sub" value="注册"></td>
</tr>
</table>
</form>
</div>
<!--第3个div : 右边部分-->
<div class="re-right">
<p>已有账号?<a href="#">立即登录</a></p>
</div>
</div>
</body>
</html>
案例2：个人博客主页（HTML+CSS）
效果展示：
代码实现：HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS网页布局</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!-- 头部 -->
<div class="header">
<div class="logo">
<img src="image/logo.png" alt="logo.png">
</div>
<div class="nav">
<ul>
<li>手记</li>
<li>视频</li>
<li>图片</li>
<li>首页</li>
</ul>
</div>
</div>
<!-- 主体 -->
<div class="main">
<div class="top">
<img src="image/1.jpeg" alt="">
</div>
<!-- 遮罩层 -->
<div class="topLayer">
</div>
<!-- 最上层的内容 -->
<div class="topLayer-top">
<div class="word">MY BEAUTIFUL LIFE</div>
<button>LOOK MORE ></button>
</div>
<div class="middle">
<div class="m-top">
<div class="commen weibo">
<img src="image/weibo.png">
<div class="comm">MICROBLOG</div>
</div>
<div class="commen weixin">
<img src="image/weixin.png">
<div class="comm">WECHAT</div>
</div>
<div class="commen qq">
<img src="image/QQ.png">
<div class="comm">QQ</div>
</div>
<div class="clear"></div>
</div>
<div class="m-middle">
"I want to give good things to record down,<br>after the recall will be very beautiful."
</div>
<div class="m-bottom">
<div class="m-com">
<img src="image/03-01.jpg">
<div class="des1">Cool Image</div>
<div class="des2">Record The Picture</div>
</div>
<div class="m-com">
<img src="image/03-02.jpg">
<div class="des1">Great Picture</div>
<div class="des2">Record The Picture</div>
</div>
<div class="m-com">
<img src="image/03-03.jpg">
<div class="des1">Cool Image</div>
<div class="des2">Record The Picture</div>
</div>
</div>
</div>
<div class="clear"></div>
<div class="bottom">
<div class="content">
<div class="titile">FROM THE PHOTO ALBUM</div>
<div class="pic-content">
<dl>
<dt><img src="image/04-01.jpg"></dt>
<dd class="word">
Life is like a book, just read more and more refined, more write more carefully. When read, mind open, all things have been indifferent to heart. Life is the precipitation.
</dd>
</dl>
<dl>
<dt><img src="image/04-02.jpg"></dt>
<dd class="word">
Life is like a cup of tea, let people lead a person to endless aftertastes. You again good taste, it will always have a different taste, different people will have different taste more.
</dd>
</dl>
</div>
<div class="clear">
</div>
</div>
</div>
</div>
<!-- 底部 -->
<div class="footer">
© 2016 imooc.com 京ICP备13046642号
</div>
</body>
</html>代码实现：CSS
*{
padding: 0;
margin:0;
}
.header{
width: 100%;
height: 100px;
}
.header img{
width:300px;
height: 85px;
padding-left:100px;
padding-top: 8px;
}
.header .logo {
float: left;
}
.header .nav {
float: right;
}
.header .nav ul {
margin-right: 100px;
}
.header .nav ul li{
float: left;
list-style: none;
width: 80px;
height: 100px;
line-height:100px;
font-size:15px ;
font-weight: bolder;
color: #7D7D7D;
}
.main .top{
width: 100%;
height: 600px;
}
.main .top img{
width: 100%;
height: 600px;
}
.main .topLayer{
position: absolute;
top: 100px;
left: 0;
background-color:#000;
width: 100%;
height: 600px;
opacity: 0.5;
}
.main .topLayer-top{
width: 500px;
height: 300px;
position: absolute;
top:400px;
margin-top: -150px;
z-index: 2;
right:50% ;
margin-right: -250px;
}
.main .topLayer-top .word{
padding-top: 100px;
color: #fff;
font-size: 45px;
font-weight: bolder;
text-align: center;
font-family: "微软雅黑";
}
.main .topLayer-top button{
width:200px;
height: 60px;
margin-top: 50px;
color: #fff;
background-color:#F5704F ;
font-family: "微软雅黑";
text-align: center;
font-weight: bolder;
font-size: 14px;
border-radius:8px ;
margin-left: 150px;
}
.main .middle{
width: 1000px;
margin: 0 auto;
}
.main .middle .m-top .commen{
float:left;
width: 33.3%;
padding-top: 50px;
text-align: center;
}
.main .middle .m-top .commen img{
width: 100px;
height:100px;
}
.main .middle .m-top .commen .comm{
font-size: 20px;
color:#7D7C7F;
font-weight: bold;
padding-top: 20px;
}
.main .middle .m-middle{
font-size: 22px;
color: #E19796;
font-weight: bold;
padding-top: 50px;
font-style:italic;
text-align: center;
padding-bottom: 50px;
}
.clear{
clear: both;
}
.main .middle .m-bottom .m-com{
float: left;
padding: 10px;
text-align: center;
font-weight: bold;
font-size: 20px;
}
.main .middle .m-bottom .m-com img {
width:310px;
height: 260px;
}
.main .middle .m-bottom .des1{
color:#7D7D7F;
padding-top: 20px;
}
.main .middle .m-bottom .des2 {
padding-top: 10px;
color: #BDBDBC;
}
.main .bottom {
background-color: #F9F9F9;
}
.main .bottom .content {
width:1000px ;
margin: 0 auto;
}
.main .bottom .content .titile{
text-align: center;
font-size: 20px;
font-weight: bold;
color: #7D7C7F;
font-family: "微软雅黑";
padding-top:50px;
padding-bottom: 50px;
}
.main .bottom .content .pic-content dl {
float: left;
width:470px;
margin: 10px 12px;
}
.main .bottom .content .pic-content dl img {
width:470px;
height: 460px;
}
.main .bottom .content .pic-content dl .word {
padding-top:20px;
font-size: 20px;
font-weight: bold;
color:#7D7C7F;
padding-bottom: 50px;
}
.footer{
width: 100%;
height: 100px;
background-color: #292C35;
color: #ffffff;
text-align: center;
line-height: 100px;
font-family: "微软雅黑";
font-size: 15px;
}
上一篇： 详细介绍微信小程序的功能
下一篇： PHP将网页设置为桌面快捷方式