随笔- 134 文章- 0 评论- 1 阅读- 9994

HTML+CSS案例——自己的网站01

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

个人博客网页

参考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.cnblogs.com/csj-717/" target = "_blank">cccsj - 博客园></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 = "https://www.csdn.net/" 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>