通过之前得学习，今日做一个综合案例来巩固自己所学的知识。其要求如下：

　　

个人博客网页

参考Internet网上的博客网站，设计自己的个人网页，主要包括：图像背景、表格布局，插入图像，flash或者影片播放，插入超级链接（至少3个），例如点击“关于我”，将链接到表单设计的网页，进行个人信息的填写。点击提交后，回到主页。

 

源代码如下：

　　

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>SuperCsj</title>
        <style>

            * {
                margin: 0;
                padding: 0;
            }

            html,
            body {
                height: 100%;
            }

            body {
            	/*************滑窗****************/
                display: flex;
                flex-direction: column;
            }

            header,
            footer {
                height: 60px;
                background: pink;
            }

            main {
                flex: 1;
                overflow: auto;
                background-image:url(images/2.png);
                background-repeat:no-repeat;
                background-size:1550px 610px;
            }


            .header_li{
            	float:right;
            }

            .header_li li{
            	float:left;
            	list-style-type:none;
            	line-height:50px;
            	height:20px; 
            	width:150px;
            	margin-right:50px;
            }


             .footer_li{

            	float:left;
            }

            .footer_li li{
            	float:left;
            	list-style-type:none;
            	line-height:50px;
            	height:20px;
            	width:150px;
            	margin-left:50px;
            	margin-right:50px;
            	margin-bottom:5px;
            }


      		a{
            	text-decoration:none;
            }

            a:hover{
            	 font-size:larger;
            	 font-weight: bold;
            }

            .main_right{
            	float:right;
            	padding:0 20px;
            	margin:50px 0px;
            	background-color:rgba(0,0,0,0.3);
            	width:300px;
            	height:500px;
            	background-repeat:no-repeat;
            	overflow-y:auto;
            }

            .main_right li{

            	padding:10px;
            	font-size:20px;
            }


        </style>
    </head>
    <body>
        <header>
        	<img src="images/3.png" height = "60px">
        	<div class = "header_li">
        	<ul>
        		<li><a href = "PHPOne.html" target = "_blank">首页></a></li>
        		<li><a href = "PHOTwo.html" target = "_blank"></a>个人中心></li>

        	</ul>
        	</div>
        </header>


        <main>
        	<div class = "main_right">
        		<ul>
        			<li><a href = "https://www.baidu.com/?tn=15007414_pg" target = "_blank">百度—BaiDu></a></li>
        			<li><a href = "https://passport2.chaoxing.com/login?fid=&newversion=true&refer=http%3A%2F%2Fi.chaoxing.com" target = "_blank">超星></a></li>
        			<li><a href = "https://www.bilibili.com/" target = "_blank">哔哩哔哩 (゜-゜)つロ 干杯~></a></li>
        			<li><a href = "https://www.acwing.com/problem/" target = "_blank">题库AcWing></a></li>
        			<li><a href = "https://oi-wiki.org/" target = "_blank">OI Wiki></a></li>
        			<li><a href = "https://pintia.cn/home" target = "_blank">PTA | 程序设计类实验辅助教学平台></a></li>
        			<li><a href = "https://www.runoob.com/w3cnote/div-scroll.html" target = "_blank">Java 基础语法 | 菜鸟教程></a></li>
        			<li><a href = "https://www.w3school.com.cn/" target = "_blank"> W3School></a></li>
        			<li><a href = "" target = "_blank">CSDN - 专业开发者社区></a></li>
        			<li><a href = "https://www.wjx.cn/login.aspx" target = "_blank">问卷星></a></li>
        			<li><a href = "http://iwrite.unipus.cn/" target = "_blank">iWrite英语写作教学与评阅系统></a></li>
        		</ul>
        	</div>
        </main>



        <footer>
        	<div class = "footer_li">
        	<ul>
        		<li><a href = "https://www.stdu.edu.cn/" target = "_blank">石铁大官网></a></li>
        		<li><a href = "https://tiedao.vatuu.com/service/login.html" target = "_blank">教务系统></a></li>
        		<li><a href = "https://webvpn.stdu.edu.cn/http/77726476706e69737468656265737421a1ae13d27666301e2f5cc7fdcf06/jwxt/login.jsp" target = "_blank">教辅系统></a></li>
        		<li>慎思明辨，知行合一</li>
        	</ul>
        	</div>
        </footer>
    </body>
</html>