当前位置:

CSS3+HTML5 实用实例

本课程将使用我们学过的CSS3+HTML5知识应用到一个实例。

本课程实例HTML5代码:


<link rel="stylesheet" href="2.css">

<div id="main">
<header>
<h1>个人简历</h1>
</header>

<article>
<h2>个人介绍</h2>
<p class="grjs">
<img src="https://www.xuewangzhan.com/wp-content/uploads/2013/01/lc.jpg" class="img"/><br/>
我是一个<span class="xs">计算机专业毕业的大学生</span>,我是一个计算机专业毕业的大学生<br/>我是一个计算机专业毕业的大学生我是一个计算机专业毕业的大学生</p>
<h2 class="xxjl">学习经历</h2>
<ol>
<li>2010年毕业XXX中学</li>
<li>2013年毕业XXX高中</li>
<li>2014年毕业XXX大学</li>
<li>2020年毕业XXX研究生</li>
</ol>

<h3 class="xxjl">视频介绍</h3>

<p class="sp">
<video src="https://cloud.video.taobao.com//play/u/96402691/p/1/e/6/t/1/214945172166.mp4" width="280px" height="200px"></video>
</p>

<p class="spjs">视频介绍视频介绍视频介绍视频介绍视频介绍视频介绍视频介绍视频介绍视频介绍视频介绍视频介绍视频介绍视频介绍视频介绍视频介绍视频介绍视频介绍视频介绍视频介绍视频介绍视频介绍视频介绍视频介绍</p>

</article>

<div style="clear:both;"></div>

<footer>
<p>希望得到贵公司尽快的回复。也可以在我的<a href="http://www.xuewangzhan.com/">个人博客</a>留言!</p>
</footer>

</div>

本课程实例CSS3代码:


p{font-size:20px;}
h1{font-size:34px;color:#D8EF56;height:60px;text-align:center;}

h2,h3{font-weight:600;font-size:18px;border-bottom:1px solid #79A212;padding:10px;}

.xxjl{color:#f00;}

.xs{font-size:20px;color:#4D6A05;width:300px;height:200px;}

.spjs{font-weight:300;}

#main{background:#A5D13E;width:1000px;margin:0 auto 0 auto;border:1px solid #f00;padding:20px;}

.img{width:160px;height:160px;border:2px dashed #f00;border-radius:80px;margin:20px 10px 20px 0;}

.sp{float:left;width:300px}

.spjs{float:right;width:690px;}

.grjs{text-align:center;}

li{padding:10px 0 10px 0;font-size:18px;}

footer{padding:20px 0 10px 0;border-top:1px solid #79A212;}
发布:学建站网   最后更新:  浏览量:175864 次

发表评论

邮箱地址不会被公开。 必填项已用*标注