实验目的：
1、 能够对整个页面进行html结构设计。
2、 掌握CSS+DIV的应用。
实验内容及要求：
***个人博客网页
参考Internet网上的博客网站，设计自己的个人网页，主要包括：图像背景、表格布局，插入图像，flash或者影片播放，插入超级链接（至少3个），例如点击“关于我”，将链接到表单设计的网页，进行个人信息的填写。点击提交后，回到主页。
实验源代码：
myweb.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我试试这个昵称好使不的主页</title> <link href="myweb.css" rel="stylesheet"> </head> <body> <div class="main"> <div class="left_div"> <p class="left_p"><img class="head" src="head.jpg"></p> <h1 id="name">linmob</h1> <p class="left_p">Is't never too old to learn.</p> <hr/> <p class="mid"> <p>我是一个编程菜鸟，最喜欢的事是篮球、追剧和改Bug</p> <p>最不喜欢的事是洗碗</p> <p>我会不定时的上传自己的学习经验</p> </p> <hr/> <p class="min">欢迎来到我的个人主页！</p> <div class="left_p"> <div class="button" > <a class="a" href="https://www.cnblogs.com/linmob/">博客园</a> </div> <div class="button" > <a class="a" href="https://github.com/linmob2567">github</a> </div> <div class="button" > <a class="a" href="https://space.bilibili.com/554351352">b站</a> </div> <div class="button" > <a class="a" href=" https://user.qzone.qq.com/1483249195/main">QQ空间</a> </div> </div> <div class="left_p"> <a class="di" href="setUp.html">关于我</a> </div> </div> <div class="right_div"> <div class="list"> <li> <h2 class="list_title"> <a href="https://www.cnblogs.com/linmob/p/14611695.html"> Python:爬取全国各省疫情数据并在地图显示 </a> </h2> <p>基于python语言爬取腾讯的疫情数据</p> <a> <time>2021-03-30 14:02</time> <a href="https://www.cnblogs.com/linmob/p/14611695.html">继续阅读</a> </a> </li> <hr class="line"/> <li> <h2 class="list_title"> <a href="https://www.cnblogs.com/linmob/p/14353748.html"> 一个抽取百度定位的教程 </a> </h2> <p>基于百度地图demo实现软件定位功能</p> <a> <time>2021-01-31 20:02</time> <a href="https://www.cnblogs.com/linmob/p/14353748.html">继续阅读</a> </a> </li> <hr class="line"/> <li> <h2 class="list_title"> <a href="https://www.cnblogs.com/linmob/p/12739190.html"> 学习JAVA语言的第一步 </a> </h2> <p>安装好JAVA开发环境并且在Eclipse上面运行HelloWorld程序</p> <a> <time>2020-04-20 17:29</time> <a href="https://www.cnblogs.com/linmob/p/12739190.html">继续阅读</a> </a> </li> </div> </div> </div> </body> </html>
myweb.css
div{ top:0; float: left; } li{ margin-top: 50px; margin-bottom: 50px; margin-left:10%; width: 100%; list-style: none; } *{ margin: 0; padding: 0; } p{ margin-top: 10px; margin-bottom: 10px; } a{ color: white; } .line{ margin-left: 10%; width: 220px; } .main{ width:100%; height:100%; position: absolute; background: lavenderblush; } .left_div{ background: #474b60; width:30%; height:100%; font-size: 20px; color: white; text-align:center; } .right_div{ background: url("girl.jpg") no-repeat; background-size: cover; width:70%; height:100%; } .head{ border-radius:50%; width:100px; height:100px; } .list{ width:100%; height:100%; background-color:rgba(71,75,96,0.6);// -->70%的不透明度 } .button{ border-style: solid; border-color: white; text-decoration:none; border-radius: 30px; margin-top: 20px; margin-left: 20px; margin-right: 20px; text-align:center; } .a{ margin-left: 20px; margin-right: 20px; text-decoration:none; } .mid{ margin-left: 50px; margin-right: 50px; font-size: 20px; } .min{ margin-left: 50px; margin-right: 50px; font-size: 16px; } hr{ margin-bottom: 40px; margin-top: 40px; } .left_p{ margin-top: 50px; width: 100%; text-align: center; } .di{ margin-top: 100px; font-size: 10px; width: 100%; text-align: center; }
setup.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>个人信息设置</title> <link href="setup.css" rel="stylesheet"> </head> <body> <div> <form action="myweb.html" method="post"> 头像：<input type="file" id="head" required class="put"><br> 昵称：<input type="text" id="name" class="put"><br> 签名：<input type="text" id="note" class="put"><br> 介绍：<input type="text" id="jieshao" class="put"><br> 邮箱：<input type="text" id="mail" class="put"><br> <input type="submit" value="提交" class="button"> <button type="reset" class="button">重置</button> </form> </div> </body> </html>
setup.css
div { font-size: 15px; font-family: 华文行楷; margin-top: 200px; color: white; background: rgba(71,75,96,0.6); } a:hover { font-size: 40px; } a:link { color:#6495ED; } a:visited { color: #6495ED; } form { clear: both; font-family: 华文行楷; font-size: 30px; margin-left: 43%; } #nav{ position:relative; width:100%; height:80px; text-align:center; overflow:hidden } #nav .nav-skin{ float:left; position:relative; left:50%; } #nav .nav-skin li{ font-size: 20px; position:relative; right:50%; float:left; margin:10px; padding:0 10px; line-height:60px; } .button { margin-top: 30px; width: 100px; padding:8px; background-color: #428bca; border-color: #357ebd; color: #fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; /* future proofing */ -khtml-border-radius: 10px; /* for old Konqueror browsers */ text-align: center; vertical-align: middle; border: 1px solid transparent; margin-left: 30px; margin-bottom: 30px; font-size:75% } .put{ margin-top: 20px; border: 1px solid #ccc; padding: 7px 0px; border-radius: 3px; /*css3属性IE不支持*/ padding-left:5px; width: 200px; height: 30px; background: rgba(71,75,96,0.6);; } body { background-repeat: no-repeat; background-size:cover; background-attachment: fixed; background-image: url(girl.jpg); }