您的位置：首页 > Web前端 > HTML5

HTML5 之 CSS简单使用（一）

2016-04-10 18:42 519 查看

HTML5简单使用

HTML5开始学习，下面是HTML5代码与CSS代码的使用

通过css样式控制HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
padding:0; margin: 0;
}
p{
margin-left: 220px; font-size: 20px;
}
span{
margin-left: 220px; color: #999999;
}
</style>
</head>
<body>
<img src="img/top.png" width="1950px" height="150px">
<img src="img/title.png" width="1950px" height="650px">
<div>
<p>最新推荐教程</p>
<span>会员都在下雪</span>
<img src="img/content.png" width="1950px" height="839px">
</div>
<img src="img/foot.png" width="1950px" height="803px">
</body>
</html>

div css 使用

html代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="common.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="w-1000">
<div class="learn-title-nav">
<a href="#">所有课程</a>
<a href="#">专题</a>
</div>
<div class="learn-title-des learn-coures-banner-ios">
<div class="learn-title"> 天气预报</div>
<div class="learn-des">
春回大地，草长莺飞，又到了植树造林的大好时节。党和国家领导人习近平、李克强、张德江、俞正声、刘云山、王岐山、张高丽等5日上午参加了首都义务植树活动。这，已经成为每年的惯例了。
</div>
</div>

<div class="learn-video">
<img src="img/video.jpg" alt="" width="1000">
</div>
<div class="learn-video-info">
<div class="left">
<p><a href="#"> 下载全部课程源码</a></p>
<p><a href="#"> 太卡点我</a></p>
</div>
<div class="right">
<div class="rightnum">
<div class="numberbox">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

css样式代码

style.css

.learn-title-nav{
line-height: 64px;;
}
.learn-title-nav a{
color: black; font-size: 25px;
}
.learn-coures-banner-ios{
background: url("img/learnCourseVideoTop.jpg");
}
.learn-title-des .learn-des{
color: azure; font-size: 20px;
padding: 13px 0 0 26px;
}
.learn-title-des .learn-des{
font-size: 14px;
color: #929191;
padding: 6px 26px 0 26px;
}
.learn-video{
width: 1000px;
height: 560px;
}
.learn-video-info{
height: 84px;
background: #101213;
line-height: 84px;
}
.learn-video-info .left{
width: 50%;
float: left;
}
.learn-video-info .left p{
float: left;
padding-left: 38px;
font-size: 14px;
}
.learn-video-info .left p a{
color: #1abc9c;;
}
.learn-video-info .right{
width: 350px;
height: 84px;
float: right;
position: relative ;
margin-right: 40px;
}
.learn-video-info .right .rightnum{
width: 260px;
height: 40px;
margin: 0 auto;
margin-top: 20px;
position: relative;
overflow: hidden;
}
.learn-video-info .right .rightnum a{
display: block;
float: left;
width: 40px;
height: 40px;
background: #1d1d1d;
text-align: center;
color: #fff;
font-size: 14px;
margin: 0 6px;
position: relative;
line-height: 40px;

}

.learn-video-info .right .rightnum a:hover{
width: 36px;
height: 36px;
border: 2px solid#29bb9c;
font-size: 14px;
line-height: 36px;
}

common.css

body p{
margin:0;
padding: 0;
font-family: "Lantinghei SC","Hiragino Sans GB","Microsoft YaHei",helvetica,arial,sans-serif;
}

body{
background: #f1f1f1;
}

a{
text-decoration: none;
}

.cf:after{
content:'';
display: block;
clear: both;
}
.b{
font-weight: bold;
}
.w-1000{
width: 1000px;
margin: 0 auto;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航