CSS3+HTML5 实用实例

以下为学做网站论坛关于“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.net/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.net/">个人博客</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;}