CSS深入课堂作业盒子模型

盒子模型1 图文链接

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>newsimageslist</title>
<style>
#newsimageslist{text-align: center;font-size: 0;
}
#newsimageslist img{height:200px;width: 200px;margin-left: 5px;padding:5px;border: 1px solid #0cf;
}
a{text-decoration:none;
}
#nav{padding-right: 10px;margin-right:10px;float: right 10;position:relative;
top:20px;
left:20px;}
ul{list-style-type:none;padding:0;
}</style></head>
<body><div id="newsimageslist">     <img src="data:images/crisis.jpg" alt="" style="float:left;" ></div><div id="nav"><li><ul><a href="#" style="float:left;" >段落1   2020.4.9</a></ul><br><HR width=100 SIZE=1 align=left><ul><a href="#" style="float:left;" >段落1    2020.4.9</a></ul><br><HR width=100 SIZE=1 align=left><ul><a href="#" style="float:left;" >段落1    2020.4.9</a></ul><br><HR width=100 SIZE=1 align=left></li></div>
</body>
</html>

实现效果

盒子2 图片排列

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>newsimageslist</title>
<style>
#newsimageslist{text-align: center;font-size: 0;
}
#newsimageslist img{height:100px;width: 100px;margin-left: 5px;padding:5px;border: 1px solid #0cf;
}
</style></head>
<body><div id="newsimageslist"><img src="data:images/crisis.jpg" alt=""><img src="data:images/crisis.jpg" alt=""><img src="data:images/crisis.jpg" alt=""></div>
</body>
</html>

实现效果

盒子3 链接排列

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=didive"><title>Document</title><style>*{margin:  0;padding: 0;}#nav{margin: 100px auto;width:300px;font-size: 0;}a{display: inline-block;height: 30px;width: 80px;font-size: 14px;text-align: center;line-height: 30px;text-decoration: none;border-bottom: 1px solid #ccc;}a:hover{color:white;background-color: #ccc;border: 1px solid;border-left-color: orange;border-right-color: orange;border-top-color: orange;}</style>
</head>
<body><div id="nav"><a href="#">链接1</a><a href="#">链接2</a><a href="#">链接3</a></div></body>
</html>

实现效果

鼠标放上去变色

盒子4 educoder顶部栏模仿

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Educoder</title><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script src="step4/verify.js"></script>
</head>
<style type="text/css">body {padding: 0;margin: 0;}.container {min-width: 1200px;}.flex {display: flex;}.full-height {height: 100%;}header {background: #24292D;height: 60px;justify-content: space-between;padding: 0 25px;}header > div {height: 100%;display: flex;align-items: center;}.logo-block {display: flex;align-items: center;justify-content: center;}.logo {width: 40px;height: 38px;margin-right: 30px;}.menu-item {color: #ffffff;font-size: 16px;width: 64px;height: 100%;display: flex;align-items: center;margin-right: 30px;position: relative;cursor: pointer;}.hot {position: absolute;top: 10px;right: -22px;}.icon-item {height: 100%;width: 48px;display: flex;align-items: center;cursor: pointer;justify-content: center;}.user {width: 34px;height: 34px;margin-left: 15px;cursor: pointer;}/*********** Begin ************/.menu-item:hover {opacity: .7;}.active {position: relative;color: #459be5;}.active:after {position: absolute;content: ' ';width: 14px;height: 2px;background: #459be5;bottom: -10px;left: 0;}/*********** End ************/
</style>
<body>
<div class="container"><header class="flex"><div class="left-wrap"><div class="logo-block"><img src="https://www.educoder.net/images/educoder/headNavLogo.png?1526520218" class="logo"></div><div class="menu-block full-height flex"><div class="menu-item"><span class="active">实践课程</span></div><div class="menu-item"><span>翻转课堂</span></div><div class="menu-item"><span>实训项目</span></div><div class="menu-item"><span>在线竞赛<img class="hot"src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAQCAYAAAAFzx/vAAACl0lEQVRIS62UP0gbURzHP09DUrHW1EqHuLhYBC0t1NOCg4M432IXhxZKDwShxUA7iuLmoLUEXHSRghk1OLgaaCrnn6FD6aFUEDoIYq5NxBBNXnkvl3hWi4N5y927e+/3+f2+vz9CQhCYAl4C96nSkoC4sJUGFoEPQsJH4F2VODeZmVVARQ/fdPI2/1W0XsSuAqr30qqrg85O2N0F1726V2ciEejqQp6fI1IppOsivG9+p5TRguOQcxxOgbzaK5kvAQ0DbBtME5lIgGEg/PupKUQ0CtksBIOQz8PQEDIQQKysXBFhf3yc3YmJSkQ1/wNK0wQfUO8PDhBbW8j5eRgehnAYsb6ObGzkuLWVQ+DUMHhm22ybJr/VfUBDfE8dYUVTLyK5tASOAy0tCMtCAUVzMywsIPv6EMmklic3Okr99DRf2trI7e1x1zDosW2+mSaZf4AVeNGfwzJQ5TCTgVAI0dGhJda5m5uD3l5yqRQ/gcDICI9iMba7u8ltblJvGDy1bb77gApUbg8d7XVADfAkVTnVEabTkEySjUZxZmY4AdqXl2nq72enoUHn6Y5h8MS2+WGa/Ekk/H2o5VVgBdRtob3wikYDfEDlwFkiQX51lbqBAdIbG9SGQoR7ejgYG+NwclIbVMDHto3jAf1VpFJQA2lRgFngrfZAyWZZEI+XchiJULAsTuJxfjkOLtA0OEhDezuyWCSzs8PJ2lqlCgORCA8ti6N4XLdDuTaKXh9K+KSKJlgsjbZXAsIXTQk54Ag4Bs6AWq/alHPlc0oZ9a6MquUzrr97/9wCLD6A975xV7og4Svw3Lu/BrwQkL3NpPHfvQ64D7QCn4HXohRc1dZ1QDWJYnqy+1umSshLQAn3gDcCpqtk/4qZv02gFT1dbcRiAAAAAElFTkSuQmCC"></span></div><div class="menu-item"><span>教学案例</span></div><div class="menu-item"><span>交流问答</span></div></div></div><div class="right-wrap"><div class="icon-list full-height flex"><div class="icon-item"><img src="https://www.educoder.net/api/attachments/411643" alt=""></div><div class="icon-item"><img src="https://www.educoder.net/api/attachments/411644" alt=""></div><div class="icon-item"><img src="https://www.educoder.net/api/attachments/411645" alt=""></div></div><img class="user" src="https://www.educoder.net/images/avatars/User/b?t=1569204859650" alt=""></div></header>
</div>
</body>
</html>

实现效果

CSS深入课堂作业盒子模型相关推荐

CSS基本知识之盒子模型
CSS基本知识之盒子模型首先要知道什么是盒子模型? 所谓盒子模型:就是把 HTML 页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器.CSS 盒子模型本质上是一个盒子,封装周围的 HT ...
CSS布局：CSS三大特性、盒子模型
CSS布局 Date: September 3, 2022 Summary: CSS三大特性.盒子模型 CSS三大特性 ◆ 能够认识不同选择器的优先级公式 ◆ 能够进行 CSS 权重叠加计算,分析 ...
CSS中的标准盒子模型和怪异盒子模型
一.什么是盒子模型(Box Model) 盒子想必大家都是知道的吧! 生活中我们的快递有盒子包装着,买的蛋糕也是有盒子包装着,我们的礼品也是被盒子包装着. 模型是什么呢? 它是主观意识借助实体或者虚拟 ...
web前端 --- CSS（04） -- 盒子模型、div+css网页布局、css3新特性
盒子模型 (1)网页标签分类: 行内元素: 块级元素:有宽高,可以设置大小,同时不会让其他块元素默认占据当前行 (2)内边距: 内容和边线之间存在空白区域,空白区域被称为:内边距(padding) 盒 ...
CSS 三大特性与盒子模型
CSS 三大特性 CSS层叠性 css=层叠样式表所谓层叠性是指多种CSS样式的叠加. 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个 ...
CSS样式中选择器+盒子模型+定位+浮动
CSS样式中选择器+盒子模型+定位+浮动一.选择器选择器,选择你所需要修饰的HTML元素 1.通配符选择器 <!DOCTYPE html> <html><head&g ...
html盒子模型多个盒子,css如何使用不同盒子模型
css如何使用不同盒子模型 css使用不同盒子模型可以通过css属性box-sizing来设置,当它的值为content-box时,是标准的盒子模型:当它的值为border-box时,是IE盒子模型: ...
html如何设置浮动的盒子,CSS的浮动以及盒子模型
原标题:CSS的浮动以及盒子模型 "没错,就是他." 今天我们来了解一下浮动我们之前说过div是一个块级元素单独占一行的,排版会很不方便,这就引出了我们今天要学习的内容:浮动这 ...
CSS入门三、盒子模型
零.文章目录 CSS入门三.盒子模型 1.网页布局的本质网页布局过程: 先准备好相关的网页元素,网页元素基本都是盒子 Box . 利用 CSS 设置好盒子样式,然后摆放到相应位置. 往盒子里面装内容 ...

CSS深入课堂作业盒子模型

盒子模型1 图文链接

盒子2 图片排列

盒子3 链接排列

盒子4 educoder顶部栏模仿

CSS深入课堂作业盒子模型相关推荐

最新文章

热门文章

CSS深入课堂作业 盒子模型

盒子模型1 图文链接

盒子2 图片排列

盒子3 链接排列

盒子4 educoder顶部栏模仿

CSS深入课堂作业 盒子模型相关推荐

最新文章

热门文章

CSS深入课堂作业盒子模型

CSS深入课堂作业盒子模型相关推荐