web应用开发学习—

一、学习内容

充分理解并掌握CSS基本用法，了解四种CSS样式应用的方法，包括行内样式、内嵌式、链接式以及导入式。学习并应用与布局密切相关的技术，例如浮动技术和定位技术，以及display、block、inline、table、flex等属性。学习并应用table+css、div+css、html5布局，固定布局、流动布局与弹性布局。

二、实验内容

1.创建一个新的HTML文档，获得一个完整的文档结构。

2.编写css文件定义HTML的显示样式。
（1）设置网页整体高度、图片背景

（2）利用元素选择器自定义个人主页大标题背景颜色、黑色边框等。

（3)利用元素选择器自定义链接方框背景颜色、黑色边框、浮动设置为left、设置字体大小、字体等。

（4）利用元素选择器自定义主页左方导航方框背景颜色、黑色边框、设置字体大小、字体等。

（5）利用元素选择器自定义主页右边方框背景颜色、黑色边框、设置字体大小、字体等

（6）利用元素选择器自定义主页右边标题方框背景颜色、黑色边框、设置字体大小、字体等

（7）利用元素选择器自定义点击链接时的颜色动态效果。

（8）利用元素选择器自定义footer方框背景颜色、黑色边框、设置字体大小、字体等。

3.利用链接式应用css。

在html文件中利用类选择器应用css文件布局html文件，插入学院logo，针对link,vistied、hover、active四种状态对个人主页各部分的索引进行设置。

在html文件中利用类选择器应用css文件布局html文件，设置左侧布局栏。并在其中插入header和内容。

在html文件中利用类选择器应用css文件布局html文件，设置个人简介栏。插入图片float设置为left，插入文字简介。

在html文件中利用类选择器应用css文件布局html文件，利用li设置列表，设置个人经历。

在html文件中利用类选择器应用css文件布局html文件，利用li设置列表，设置学习经历。
在html文件中利用类选择器应用css文件布局html文件，设置footer。

三、完整代码

/*构建整体框架,设置背景图片*/
body{height: 2000px;padding:5%; background-image: url(back.jpg);}/*设置主页*/
.container{width:79%;   margin: 0 auto;border:1px solid black;}
.header{background-color:rgb(63, 64, 165);padding: 80px;border:1px solid black;}.header-content1{background-color:darkred;padding: 10px;margin: 5px;border:1px solid black;float:left;font-size: 30px;font-weight: bold;}.sidebar{text-align: center;float:left;position: absolute;border:1px black solid;background-color: rgb(164, 200, 123); height: 1500px;width: 17%;border:1px solid black;}.main{height:70%; background-color: rgb(164, 200, 123);border:1px solid black;}.content{height: 1500px;float: right;width: 75%;background-color: rgb(164, 200, 123);border:1px solid black;}.content_header{background-color: rgb(200, 32, 2);font-family:黑体;font-size:30px;text-align:center;height:50px;margin-bottom: 20px;border:1px solid black;}.word{font-family:黑体;font-size:20px;text-align:left;width: 85%;text-indent: 2em;}.head_text{font-family:黑体;color:white;font-size:40px;text-align:right;width: 100%;text-indent: 2em;}.f1{color: black;position: relative;font-size: 30px;}.f1:link{color: black;    }.f1:hover{color: yellow;}.f1:active{color:brown;}.f2{text-decoration: none;font-size: 25px;color: black;   }.f2:hover{color: yellow;}.sidebar_head{text-align: center;font-size: 30px;background-color:rgb(200, 32, 2);border:1px solid black;}.sidebar_content{text-align: center;font-size: 15px;}img{float: left;   }.footer{margin: 0 auto;background-color:black;height: 30px;text-align: center;clear:both;}.footer-text{font-family:黑体;color:white;font-size:20px;text-align:center;}.h2{color:black;font-size:20px;text-indent:50px}

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>day个人主页</title><link rel="stylesheet" type="text/css" href="yyqx个人主页.css"/></head><body><div class="container"><div class="header"><img src="logo.png" height="40%" width="40%" alt="logo"/> <div class="head_text"><p> 易烊千玺个人主页</p></div><div class="header-content1"><a href="#experience" class="f1">个人经历</a></div><div class="header-content1"><a href="#study" class="f1">学习经历</a></div><div class="header-content1"><a href="#favorite" class="f1">爱好</a></div></div><div class="main"><div class="sidebar"><span class="sidebar_head">其他人的主页</span><br/><span class="sidebar_content"><a href="https://www.bilibili.com/" class="f2">张三</a><br/><a href="https://www.bilibili.com/" class="f2">李四</a><br/><a href="https://www.bilibili.com/" class="f2">赵五</a><br/><a href="https://www.bilibili.com/" class="f2">黄六</a></span></div><div class="content"><div class="content_header">个人简介</div><img src="yyqx.jpg"  width="50%"/> <div class="h2"><p >2000年11月28日出生于湖南省怀化市，中国内地男演员、歌手、舞者，演唱组合TFBOYS成员 ，就读于中央戏剧学院。2005年，首登电视荧屏。2009年，加入飞炫少年组合。2013年，加入TFBOYS组合。2015年，声演法国动画电影《小王子》男主角；自编舞蹈《IF YOU》《RHYTHM TA》，创下爱奇艺生日会直播在线用户数据最高纪录。2016年，获得第16届音乐风云榜最受欢迎偶像。2017年，单曲《离骚》获得Billboard Radio China年度华语金曲；获得共青团中央“五四优秀青年”称号；成立易烊千玺爱心基金；担任丹麦旅游形象代言人和世界卫生组织中国健康特使。2018年，出席第60届格莱美奖颁奖典礼；担任《这！就是街舞》明星队长，带领其战队夺得第一季全国总冠军；以文化、专业双科第一的成绩考入中央戏剧学院表演系本科班；出演雅加达亚运会闭幕式“杭州8分钟”；发行首张专辑《我乐意沉默释放内心焰火》。2019年，完成五大男刊单封满贯；主演古装剧《长安十二时辰》，凭借该剧提名第30届中国电视金鹰奖最佳男演员；首部担正主演的电影《少年的你》内地票房15.58亿，凭借该片提名第39届香港电影金像奖最佳男主角，获得金像奖最佳新演员和第35届大众电影百花奖最佳新人；举行易烊千玺2019玊尔演唱会；专辑《温差感》入选《南方都市报》2019十大华语专辑。2020年，第五次登上央视春晚；完成男女十大刊封面满贯，荣登2020福布斯中国名人榜榜首；领衔主演的电影《送你一朵小红花》定于12月31日上映。</p>    </div><div id="experience"><h2>个人经历</h2><hr/><span class="word"><ol><li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum nihil tenetur natus placeat dicta fuga ea ex porro corrupti quidem?</li><li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam incidunt rerum officia nisi ipsa accusamus explicabo quidem fugiat hic enim.</li><li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex quibusdam similique ipsa illum mollitia obcaecati ipsam tempore quisquam cum dolores.</li></ol></span></div><div id="study"><h2>学习经历</h2><hr/><span class="word"><ol><li>前锋小学</li><li>北京化工大学附属中学</li><li>湖南师大附中梅溪湖中学</li><li>中央戏剧学院</li></ol>           </span></div><div id="favorite"><h2>个人爱好</h2><hr/><span class="word"><ol><li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione eaque.</li><li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ducimus!</li><li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni error?</li><li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate quas!</li><li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint dignissimos.</li><li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut maxime!</li></ol> </span></div></div></div><div class="footer"><div class="footer-text"><p>制作人：代爱莹 2020-10-13</p></div></div></div></body>
</html>