web前端 校园网站设计
web前端 校园网站设计
web前端 校园网站设计
一、实验题目
校园网站
二、实验内容简介
1、布局
2、CSS基本样式
3、浮动与定位
4、列表
三、实验过程
1. 需求分析
页面顶部：左侧的一个小框架里面是welcome的黯色的艺术字的图片，中间部分是以|小箭头隔开的三个信息点，从左往右依次是网站首页、行业动态、联系我们。再右边是搜索框架，由输入框和搜索小图片组成。
菜单部分：是以黯色和灰色图片为背景的菜单栏，上面一栏的信息是首页、新闻公告、课程中心、教学案例、备课资源中心与发展中心，鼠标指向菜单信息时，其背景色会改变，并且设置了下拉菜单，鼠标指向时会显示下拉菜单，鼠标指向时，下拉菜单背景色也会改变。要求字与字之间要有合理的空间使其美观。下面一栏的字体要比上一栏的稍小些，分别是公共选修、创新创业、成长基础、考研辅导，鼠标指向时菜单背景色会改变。
中间上部：首先在上半部分为一个团结积极向上的富有青春气息的图片，要求与下面的内容能够完美整合，简洁美观；然后图片下端中间是横向的列表，标着1、2，背景色不同，并且鼠标指向时背景色会改变。
中间部分：左侧为一个小的信息栏约占四分之一，首先是一张灰色背景写着课程内容及其英文的图片。下方的信息为一个列表，背景为灰色，分别是课前五分钟、思政学习、html强化、css规范、德育教育，鼠标指向时，背景色和文字颜色会改变，在最底部是背景为灰色的，由一个小的搜索框和两张小的图片组成；右侧是新闻公告栏包含着类型、标题、日期的七条新闻或公告，标题一行的背景色是黑色的，文字为白色，下面的新闻或公告之间由虚线隔开，左右两侧的虚线不显示，鼠标指向时，新闻或公告的背景色和文字颜色改变，并且出现下划线。
中间下部：为关于校园活动的三个图片，各占三分之一，在图片下面有文字校园活动01、02、03。要求这三个图片要与学习相关使人看到就会认为这是一个与知识相关的网站，并且在鼠标指向图片时，图片能够进行360°旋转。
页面底部：为一个有着灰色背景色的长方形框，在框中写着专业的文字，位置为中间居中，整洁美观。
2．设计方案
整体布局：
使用div进行整体布局，将页面分为六部分，分别为top(顶部),menu(菜单),img(轮播图),content(内容),listImg(图片列表),bottom(底部);分别用iframe，在网页中嵌入另一个网页，宽度都为100%，高度分别为100px,100px,
400px,500px,200px,100px。并且iframe不加滚动条，浮动帧上下边界大小为0，左右边界大小为0。在菜单中设置背景图片menu——center.jpg。
（1）logo图与顶部列表、搜索框
使用div将顶部分为左(left)右(right)两部分,左侧插入一个图片，设置宽度为300px,高度100px,内边距左侧和顶部为0；右侧插入一个列表，定义三个项目，一个项目为“网站首页”，一个项目为“行业动态”，另一个项目为“联系我们”设置项目的右边框为0；接着输入表单元素类型为text。
接着定义css，首先对整体div设置一个box-sizing属性，将div看作一个盒子模型；然后对li项目中的a定义text-decoration，去掉装饰线条；设置top的宽度为100%、高度；设置顶部的左部、宽度占据顶部的40%，左浮动；设置顶部的右宽度占据顶部的60%、高度，右浮动；设置left img内边距顶部的顶端左端,设置right ul li 右边框的宽度颜色，内外边距，左浮动以及list-style：把arrow.jpg设置为列表中的列表项目标记；右侧的a标签设置颜色为gray，input标签的高度、外边距顶部、背景图片以及背景图位置，内边距右侧。
（2）二级菜单
定义两个列表，上面列表为二级菜单，下面是一级；上面的菜单第一级为分别为：首页、新闻公告、课程中心，教学案例、备课资源中心、发展中心；二级菜单为：新闻公告（校内新闻）、课程中心（精品课程）、教学案例（中小学教学案例）、发展中心（综合素养）。下面的列表为公共必修、创新创业、成长基础、考研辅导。其中首页和公共必修设置左侧内边距。
设置面对所有列表的内外边距都为0；设置对上部menu的li：没有列表标记，字体大小25px，颜色，左浮动，宽度，高度，顶部外边框，字体文本居中，鼠标指向为手，指向颜色改变；下部列表的li颜色为黑色，字体大小25，宽度200，高度40，左浮动，顶部外边距5，顶部内边距10；设置对menu类里的li没有列表标记，背景颜色，清除浮动，li本来就是块级元素，应该是竖着的，出现横着的，可能是因为上面有使用float，但是下面没有清除浮动；设置对menu类不生成框，位置为绝对定义元素；a标签去掉下划线；鼠标指向nav1的li标签, li标签里面的nav2处于显示状态。对整个二级菜单的设置为相对定义元素，z轴层叠元素为9999。
（3）轮播图
用div将轮播图分为两部分，一部分为图片轮播，另一部分为两个列表1和2。
设置对整体轮播图的高度宽度，img 的高度宽度与整体相同，位置为绝对定义元素，在z轴层叠元素为1；设置对id list的位置为相对位置元素，定位元素的左外边界与其包含的块左边界之间的漂移，在z轴层叠元素为9999；li没有列表标记，宽度高度为30，文本字体居中，元素行高度为30，左浮动；设置列表的奇数列颜色和偶数列颜色；对class content设置高度宽度，位置为相对位置元素，在z轴层叠元素为1；指向list背景颜色改变，cursor:pointer 鼠标指向时变为手型。
（4）左侧列表，指向时改变文字颜色和背景色；以及搜索框
使用div将content分为左右两部分，左侧列表和右侧列表；将左侧列表再分为三部分，第一部分为插入一张图片，定义宽度100%高度100px，第二部分插入一张列表，列表有五部分内容，分别为课前5分钟，思政学习，html强化，css规范，德育教育；最后一部分插入一个表单交互式控件，可输入文本，以及一个图片，方便理解。最后埋下伏笔，将下面校园活动板块的标题插在这。
首先对整体div设置一个box-sizing属性，将div看作一个盒子模型，不单独计算border和padding的宽度；然后定义content类的宽度高度，以及leftContent的宽度高度，左浮动和背景色；定义mid类的li标签没有列表标记，边框宽度和颜色，文字大小17px，文本居中，行间距50px；background: bisque鼠标指向时背景色改变 ，color: blue鼠标指向时文字颜色改变；定义最后一部分的图片，背景也是一张图片，背景位置以及背景色；对输入表单的宽度高度外边距的顶部和左侧进行设置；最后对左侧列表的h2标签的顶部内边距进行设置。
（5）右侧表格，隔行背景色不同；指向时，改变当前行的背景色
将右侧列表分为三部分，第一部分时总标题新闻公告，第二部分是表头：类型，标题，日期；分别用空格间隔开；最后是具体内容，都与思政内容有关，都同样被空格隔开。
对左侧列表右侧列表都设置内外边距为0，然后对右侧列表设置宽度为80%，高度为500px右浮动，对所有的ul设置没有列表标记，对h2标签设置缩进4.5em；对表头设置文字大小23px，缩进3.6em，背景颜色，左侧外边距，宽度高度，字体颜色，对span标签设置左侧内边距490px，对tent类设置字体大小20px；对右侧列表ul标签里的li标签设置宽度高度，左侧外边距110px，边框宽度以及样式为虚线，不显示左右两侧的边框，顶部内边距为8px；对文本ul标签里的li标签进行设置，单数列和双数列设置不同的背景颜色，指向时变换颜色；设置右侧列表span标签为右浮动，文字颜色为dimgray，右侧内边距为30px；对右侧文本中li标签里的a标签进行设置，text-decoration: underline鼠标指向时出现下划线， color: white鼠标指向时文字变成红色，text-decoration添加文本的修饰,none文本中没有线条，文字颜色为黑色；设置文本li标签里的a标签宽度为3px，text-overflow: ellipsis 实现省略号的效果，white-space:nowrap强制内容在一行显示，overflow:hidden多余的内容隐藏，clear: both清除浮动。
（6）企业活动图片：指向时旋转360度，放大1.3倍
将活动列表分为三部分，校园活动01、校园活动02、校园活动03。分别插入图片。首先对整体div设置一个box-sizing属性，将div看作一个盒子模型；其次设置活动列表的宽度高度；设置class rotateImg 的宽度高度，左浮动，文本居中；rotateImg img的宽度高度，设置-webkit-transition-duration旋转执行的时间0.8s，-webkit-transform: rotate(360deg) scale(1.3)鼠标指向时旋转360度,放大1.3倍,离开时还原。
（7）底部格式及内容
底部设置p标签，写入专业。
设置底部的高度宽度背景色，设置文本字体居中，内边距与字体大小。
3.代码
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>校园网站</title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<div id="top">
<iframe src="top.html" width="100%" height="100px" scrolling="no"></iframe>
</div>
<div id="menu">
<iframe src="menu.html" width="100%" height="100px" scrolling="no"></iframe>
</div>
<div id="img">
<iframe src="bigImg.html" width="100%" height="400px" scrolling="no" marginwidth="0" marginheight="0"></iframe>
</div>
<div id="content">
<iframe src="content.html" width="100%" height="500px" scrolling="no"></iframe>
</div>
<div id="listImg">
<iframe src="listImg.html" width="100%" height="200px" scrolling="no"></iframe>
</div>
<div id="bottom">
<iframe src="bottom.html" width="100%" height="100px" scrolling="no" marginwidth="0" marginheight="0"></iframe>
</div>
</body>
</html>
top.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>顶部</title>
<link rel="stylesheet" type="text/css" href="css/top.css"/>
</head>
<body>
<div id="top">
<div id="top">
<div id="left">
<img src="img/the.jpg" width="300px" height="100px" style="padding-left: 0px;padding-top: 0px;">
<!-- <img src="img/logo_back.gif" > -->
</div>
<div id="right">
<ul>
<li><a href="">网站首页</a></li>
<li><a href="">行业动态</a></li>
<li style="border-right: 0px;"><a href="">联系我们</a></li>
</ul>
<input type="text" name="" id="" value="" />
</div>
</div>
</div>
</body>
</html>menu.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜单</title>
<link rel="stylesheet" type="text/css" href="css/menu.css"/>
</head>
<body>
<div id="menu">
<ul>
<li style="margin-left: 230px;">首页</li>
<li>
<a>新闻公告</a>
<ul class="menu1">
<li><a href="">校内新闻</a></li>
<li><a href="">公告通知</a></li>
</ul>
</li>
<li>
<a>课程中心</a>
<ul class="menu1">
<li><a href="">精品课程</a></li>
<li><a href="">推荐课程</a></li>
</ul>
</li>
<li>
<a>教学案例</a>
<ul class="menu1">
<li><a href="">中小学教学案例</a></li>
<li><a href="">应用型课程案例</a></li>
<li><a href="">优质课程案例</a></li>
<li><a href="">应用型课程案例</a></li>
</ul>
</li>
<li>备课资源中心</li>
<li>
<a>发展中心</a>
<ul class="menu1">
<li><a href="">综合素养</a></li>
<li><a href="">通用能力</a></li>
</ul>
</li>
</ul>
<div id="two">
<ul>
<li style="margin-left: 600px;">公共必修</li>
<li>创新创业</li>
<li>成长基础</li>
<li>考研辅导</li>
</ul>
</div>
</div>
</body>
</html>
bigImg.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
<link rel="stylesheet" type="text/css" href="css/bigImg.css"/>
</head>
<body>
<div id="content">
<div id="bigImg">
<img src="img/9.jpg" >
</div>
<ul id="list">
<li>1</li>
<li>2</li>
</ul>
</div>
</body>
</html>content.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内容</title>
<link rel="stylesheet" type="text/css" href="css/content.css"/>
</head>
<body>
<div id="content">
<div id="leftContent">
<div id="first">
<img src="img/text-image.jpg" alt="" width="100%" height="100px">
</div>
<ul id="mid">
<li>课前5分钟</li>
<li>思政学习</li>
<li>html强化</li>
<li>css规范</li>
<li>德育教育</li>
</ul>
<div id="final" class="text">
<input type="text" name="" id="" value="" />
<img src="img/search_btn.gif" alt="">
</div>
<h2>校园活动</h2>
</div>
<div id="rightContent">
<br>
<h2>新闻公告</h2>
<div id="title">
<a>类型 标题 </a><span>日期</span>
</div>
<div id="tent">
<ul>
<li><a href="">1 [新闻] 推动高校思想政治教育实践走深走实</a><span>2021-08</span></li>
<li><a href="">2 [新闻] 扎实做好新时代思想政治工作</a><span>2021-09</span></li>
<li><a href="">3 [公告] 思政课是落实立德树人根本任务的关键课程</a><span>2020-08</span></li>
<li><a href="">4 [新闻] 关于新时代加强和改进思想政治工作的意见</a><span>2021-08</span></li>
<li><a href="">5 [公告] 课程思政建设内容要紧紧围绕坚定学生理想信念</a><span>2020-05</span></li>
<li><a href="">6 [新闻] 全面推进“大思政课”建设</a><span>2020-07</span></li>
<li><a href="">7 [新闻] 着力推动思想政治工作贯通人才培养体系</a><span>2023-02</span></li>
</ul>
</div>
</div>
</div>
</body>
</html>
listImg.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片列表</title>
<link rel="stylesheet" type="text/css" href="css/listImg.css"/>
</head>
<body>
<div id="listImg">
<div id="one" class="rotateImg">
<img src="img/11.jpg" alt="">
<p>校园活动01</p>
</div>
<div id="two" class="rotateImg">
<img src="img/6.jpg" alt="">
<p>校园活动02</p>
</div>
<div id="three" class="rotateImg">
<img src="img/7.jpg" alt="">
<p>校园活动03</p>
</div>
</div>
</body>
</html>bottom.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>底部</title>
<link rel="stylesheet" type="text/css" href="css/bottom.css"/>
</head>
<body>
<div id="bottom">
<div id="text">
<p>数据科学与大数据技术</p>
</div>
</div>
</body>
</html>index.css
div{
width: 80%;
/* border: 1px solid gray; */
margin: auto;
}
#top{
height: 100px;
}
#menu{
height: 100px;
width: 100%;
background: url(../img/menu_center.jpg);
}
#img{
height: 400px;
}
#content{
height: 500px;
}
#listImg{
height: 200px;
}
#bottom{
height: 100px;
}top.css
#right ul li{
list-style: url(../img/arrow.jpg);
float: left;
margin-left: 20px;
margin-top: 20px;
border-right: 1px solid gray;/* 右边框 */
padding-right: 20px;
}
#right a{
color: gray;
}
#right input{
height: 20px;
margin-top: 20px;
background: url(../img/search.jpg) no-repeat;
background-position: center right;
padding-right: 30px;
}menu.css
*{
margin: 0;
padding: 0;
}
#menu li{
list-style: none;
font-size: 25px;
/* color: black; */
color: white;
float: left;
width: 200px;
height: 40px;
margin-top: 8px;
text-align: center;
}
#menu li:hover{
background-color: cornflowerblue;
cursor: pointer;
}
#two li{
color: black;
font-size: 20px;
width: 200px;
height: 40px;
float: left;
margin-top: 5px;
padding-top: 10px;
}
.menu1 li{
list-style: none;
background-color: aquamarine;
clear: both;/* li本来就是块级元素，应该是竖着的，出现横着的，可能是因为上面有使用float，但是下面没有清除浮动 */
}
.menu1{
display: none;
position: absolute;
}
.menu1 a{
text-decoration: none;/* 去掉下划线 */
}
/* 鼠标指向nav1的li标签, li标签里面的nav2处于显示状态 */
#menu li:hover .menu1{
display: block;
}
#menu .menu1 li:hover{
background-color: beige;
}
#menu{
position: relative;
z-index: 9999;
}bigImg.css
div{
/* border: 1px solid red; */
}
#bigImg{
width: 100%;
height: 400px;
}
#bigImg img{
width: 100%;
height: 400px;
position: relative;
z-index: -1;
}
#list li{
list-style: none;
/* border: 1px solid gray; */
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
float: left;
}
#list li:nth-child(odd){
background-color: lightskyblue;
}
#list li:nth-child(even){
background-color: aliceblue;
}
#list{
position: absolute;
bottom: 10px;
left: 45%;
}
#content{
width: 100%;
height: 400px;
/* border: 1px solid red; */
position: relative;
z-index: 1;
}
#list li:hover{
background: bisque;
cursor: pointer;/* 鼠标手型 */
}content.css
div{
/* border: 1px solid lightgray; */
box-sizing: border-box;/* 不单独计算border和padding的宽度 */
}
#content{
width: 100%;
height: 370px;
}
#leftContent{
width: 20%;
height: 370px;
float: left;
/* border: 1px solid lightgray; */
background-color: gainsboro;
}
#mid li{
list-style: none;/* 不显示点 */
border: 1px solid lightgray;
font-size: 17px;/* 文字大小 */
text-align: center;/* 文字居中 */
line-height: 50px;/* 行间距,行高 */
}
#mid li:hover{
background: bisque;/* 鼠标指向时背景色改变 */
color: blue;/* 鼠标指向时文字颜色改变 */
}
#final{
background: url(../img/search.gif) no-repeat;
background-position: 40px 30px;
background-color: gainsboro;
}
#final input{
width: 120px;
height: 20px;
margin-top: 60px;/* 输入框与上侧距离 */
margin-left: 30px;/* 输入框与左侧距离 */
}
#final img{
width: 20%;
height: 20px;
}
#leftContent h2{
padding-top: 20px;
}
#rightContent{
width: 80%;
height: 500px;
float: right;
/* border: 1px solid red; */
}
/* *在html中表示的是所有标签,padding: 0;margin: 0;表示所有的标签的内外间距为0 */
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;/* 不显示点 */
}
#rightContent h2{
text-indent: 4.5em; /*缩进*/
}
#title{
font-size: 23px;/* 文字大小 */
text-indent:3.6em;/* 缩进 */
background-color: black;/* 背景颜色 */
margin-left: 110px;
width: 80%;
height: 40px;
color: white;/* 字体颜色 */
}
#title span{
padding-left: 490px;
}
#tent{
font-size: 20px;/* 文字大小 */
}
#rightContent ul li {
width: 80%;
height: 40px;
margin-left: 110px;/* 背景框与左侧距离 */
border: 1px dashed dimgray;/* 虚线 */
border-left: 0px;/* 不显示左侧边框 */
border-right: 0px;/* 不显示右侧边框 */
padding-top: 8px;
}
#tent ul li:nth-child(odd){
background-color: white;/* 单数列的列表背景颜色 */
}
#tent ul li:nth-child(even){
background-color: whitesmoke;/* 双数列的列表背景颜色 */
}
#tent ul li:hover{
background-color: cornflowerblue;/* 鼠标指向时背景变色 */
}
#rightContent ul li span {
float: right;
color: dimgray;/* 文字颜色 */
padding-right: 30px;/* 文字与右侧距离 */
}
#rightContent ul li a:hover{
text-decoration: underline;/* 鼠标指向时出现下划线 */
color: white;/* 鼠标指向时文字变成红色 */
}
/* a标签中有四个：link、visited、hover、active
（1）link 说明：设置a对象在未被访问前的样式表属性。
（2）visited 说明：设置a对象在其链接地址已被访问过时的样式表属性。
（3）hover 说明：设置对象在其鼠标悬停时的样式表属性。
（4）active说明：设置对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式表属性。
定义CSS时候的顺序不同，也会直接导致链接显示的效果不同。原因可能在于浏览器解释CSS时遵循的“就近原则”。
正确的顺序：a:link、a:visited、a:hover、a:active */
#rightContent li a:link,a:visited{
text-decoration: none;/* text-decoration添加文本的修饰,none文本中没有线条 */
color: black;/* 文字颜色 */
}
/* 我想让未访问链接颜色为蓝色，活动链接为绿色，已访问链接为红色：
第一种情况：我定义的顺序是a:visited、a:hover、a:link，这时会发现：把鼠标放到未访问过的蓝色链接上时，它并不变成绿色，只有放在已访问的红色链接上，链接才会变绿。
第二种情况：我把CSS定义顺序调整为：a:link、a:visited、a:hover，这时，无论你鼠标经过的链接有没有被访问过，它都会变成绿色啦。
*/
#tent li a{
width: 3px;
text-overflow: ellipsis;/* 实现省略号的效果 */
white-space:nowrap;/* 强制内容在一行显示 */
overflow:hidden;/* 多余的内容隐藏 */
clear: both;
}listImg.css
div{
box-sizing: border-box;
/* border: 1px solid red; */
}
#listImg{
width: 100%;
height: 200px;
}
.rotateImg{
width: 33.3%;
height: 200px;
float: left;
text-align: center;
}
.rotateImg img{
width: 50%;
height: 150px;
/* 旋转执行时间0.8s */
-webkit-transition-duration: 0.8s;
}
.rotateImg img:hover{
/* 鼠标指向时旋转360度,放大1.3倍,离开时还原 */
-webkit-transform: rotate(360deg) scale(1.3);
}bottom.css
div{
/* border: 1px solid red; */
}
#bottom{
width: 100%;
height: 100px;
/* border: 1px solid red; */
/* background-color: gainsboro; */
background-color: #DCDCDC;
}
#text{
text-align: center;
padding-top: 25px;
font-size: 20px;/* 字体大小 */
}4. 效果截图
5. 知识点总结及感受
知识点总结
- <iframe> 是HTML中的一个元素，它用于在网页中创建一个内嵌的框架，可以在框架中加载其他网页或内容。通过指定源，可以在<iframe>中显示来自其他网站或同一网站的内容。它常用于将其他网页、音频、视频、地图等嵌入到当前页面中，以实现更丰富的网页体验。<iframe>元素提供了一种简单的方法，使开发者能够在网页中呈现不同来源的内容，并且可以控制显示的大小和位置。<iframe>进行html页面嵌套，src属性指的是嵌套的文件名，scrolling="no"表示不希望出现滚动条，frameborder="0"表示不希望镶嵌页面的周围出现边框，width定义宽度，height定义高度。
- <link> 是HTML中的一个标签，用于在网页中引入外部资源文件，主要是用来加载样式表（CSS文件）。通过使用 <link> 标签，我们可以将外部的样式表文件链接到 HTML 页面中，从而控制网页的外观和布局。
- padding用于设置元素的内边距。内边距是指元素内容与元素边框之间的空白区域。例如通过设置 padding-top 的值，可以在元素的顶部创建一个内边距空白区域，padding属性接受各种单位，比如像素（px）、百分比（%）、ems（em）等。具体的效果取决于父元素的大小以及其他属性的设置。
- margin用于设置元素的外边距，用于在任何定义的边框之外，为元素周围创建空间。
- 可用来表示空格。
- img元素向网页中嵌入一幅图像，是单标签，是行内元素，不单独占一行。<img>标签有两个必需的属性：src属性和alt属性，src属性用于设置图片路径，alt设置的内容在图片不存在时显示，title设置的内容在鼠标指向图片时显示。
- <ul> 定义无序列表，<li> 标签定义列表项目。
- clear: both; 清除浮动。
- text-decoration添加文本的修饰，例如text-decoration: underline;设置下划线，text-decoration: none;可以使a标签中的下划线不显示。
- list-style: none;可以使列表中的点不显示。
- cursor: pointer;设置鼠标指向时，变成手势。
- box-sizing: border-box; 不单独计算border和padding的宽度。
- *{}在html中表示的是所有标签,padding: 0;margin: 0;表示所有的标签的内外间距为0。
- border: 1px dashed dimgray;设置虚线边框，border: 1px solid lightgray;设置实线边框，border-left: 0px;不显示左边框。
- z-index属性设置元素的堆叠顺序。
- -webkit-transition-duration: 0.8s; 旋转执行时间0.8s。
- -webkit-transform: rotate(360deg) scale(1.3); 鼠标指向时旋转360度,放大1.3倍,离开时还原。
- display 属性规定是否/如何显示元素,仅会更改元素的显示方式，而不会更改元素的种类。
- float 属性用于定位和格式化内容，规定元素如何浮动,例如让图像向左浮动到容器中的文本那里。
- text-overflow: ellipsis; 实现省略号的效果。
- white-space:nowrap; 强制内容在一行显示。
- overflow内容超出时，如何显示。
- hover 选择器,选择鼠标指针浮动在其上的元素，并设置其样式。
- width设置宽度，height设置高度，border设置边框属性，background设置背景，background-size背景大小，background-color设置背景颜色，background-position设置背景图的位置，text-align设置文字对齐方式，border-radius设置元素的外边框圆角，box-shadow设置元素的框架上添加阴影效果，line-height设置行间距离，color设置字体颜色，text-indent设置首行缩进，font-size设置字体大小，font-family设置字体格式。
感受
通过学习这段代码，我对HTML元素和标签的使用有了更深入的理解。<div>元素作为一个通用的容器，可以用来划分页面的不同区块，并且可以通过id和class属性来进行个性化的样式设置。<input>元素可以创建文本输入框，而<img>元素则方便地插入图片。此外，我还了解到了关于内联样式的使用，可以通过style属性为元素添加特定样式。
在实际应用中，合理的为HTML元素添加id和class属性以及内联样式，可以有效地进行页面布局和样式设置。通过使用合适的标签和属性，能够使页面对用户更加友好和易用。
总的来说，通过不断学习和实践我对HTML的掌握程度不断提高，对于构建网页和创建用户界面有了更深入的理解和掌握。这让我对于将来能够更加自信和准确地处理HTML相关的任务和项目。
开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！
更多推荐
14
0- 0
已为社区贡献1条内容
所有评论(0)