第六章 盒子模型
2024-04-17 04:08:37
1，制作北大青鸟网站的中心开班信息模块
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>中心开班信息</title><style>div{width: 250px;margin: auto;background: linear-gradient(to bottom,#4bf7ff,white);border-radius:5%;border: 1px solid gainsboro;}ul{padding-left:10px;margin-top: 5px;margin-bottom:5px;}li{list-style: none;background: url("css/dotBg.gif");width: 230px;height: 30px;text-indent: 1em;padding-top: 3px;}li:nth-of-type(1){border-top: 1px solid white;margin-top: 5px;}img,ul{vertical-align: middle;}span{color: #FFFFFF;font-size: 12px;font-weight: bold;}a{text-decoration: none;color: black;}a:hover{color: red;}</style>
</head>
<body>
<div><ul><span><img src="css/bg.gif">中心开班信息</span><li><a href="">8月12日：学历+技能班</a></li><li><a href="">8月16日：高考特招班</a></li><li><a href="">8月23日：Java精英班</a></li><li><a href="">8月31日：学士后强化班</a></li><li><a href="">9月5日：大学生就业班</a></li><li><a href="">9月9日：企业定向委培班</a></li><li><a href="">9月16日：网络营销强化班</a></li></ul>
</div>
</body>
</html>2，制作商品分类列表
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>商品分类列表</title><style>div{border: 2px solid coral;border-radius: 1%;width: 250px;margin: auto;}p{height:30px;text-indent: 4em;padding-top :10px;padding-bottom: 10px;}p:nth-of-type(1){background:url("css/icon_01.jpg")4px no-repeat;border-bottom: 1px dashed gray;}p:nth-of-type(2){background:url("css/icon_02.jpg")4px no-repeat;border-bottom: 1px dashed gray;}p:nth-of-type(3){background:url("css/icon_03.jpg")4px no-repeat;border-bottom: 1px dashed gray;}p:nth-of-type(4){background:url("css/icon_04.jpg")4px no-repeat;border-bottom: 1px dashed gray;}p:nth-of-type(5){background:url("css/icon_05.jpg")4px no-repeat;border-bottom: 1px dashed gray;}p:nth-of-type(6){background:url("css/icon_06.jpg")4px no-repeat;border-bottom: 1px dashed gray;}p:nth-of-type(7){background:url("css/icon_07.jpg")4px no-repeat;border-bottom: 1px dashed gray;}p:nth-of-type(8){background:url("css/icon_08.jpg")4px no-repeat;border-bottom: 1px dashed gray;}p:nth-of-type(9){background:url("css/icon_09.jpg")4px no-repeat;border-bottom: 1px dashed gray;}p:nth-of-type(10){background:url("css/icon_10.jpg")4px no-repeat;margin-bottom: 5px; }a{text-decoration: none;color: black;}a:hover{color: red;}</style>
</head>
<body>
<div><p><a href="">酒水、饮料</a></p><p><a href="">进口食品</a></p><p><a href="">休闲零食</a></p><p><a href="">地方特产</a></p><p><a href="">保健、冲调</a></p><p><a href="">粮油、生鲜</a></p><p><a href="">美容洗护</a></p><p><a href="">清洁洗涤</a></p><p><a href="">母婴、纸品</a></p><p><a href="">家居百货</a></p>
</div>
</body>
</html3，制作权威课程免费体验登陆页面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>免费体验登陆页面</title><style>div{background: url("css/bg.jpg")no-repeat;padding-bottom: 40px;margin-left: 600px;border-radius: 10px;width: 300px;height: 310px;}ul{color: #FFFFFF;padding-top:80px;padding-left: 20px; border-radius:10px;}li{list-style: none;}span{color: red;}p{padding-left: 30px;}a {margin-left: 80px;}</style>
</head>
<body>
<div><ul><p> <li><span>*</span>姓名：<input type="text"size="25"> </li></p><p><li><span>*</span>邮箱：<input type="text"size="25"></li></p><p> <li><span>*</span>电话：<input type="text"size="25"></li></p></ul><p> 性别：<select><option value="1">性别</option><option value="">男</option><option value="">女</option></select></p><p> 年龄：<select><option value="1">年龄</option><option value="">N</option></select></p><a href=""><img src="css/btn.jpg"></a>
</div>
</body>
</html>第六章 盒子模型相关推荐
- 制作爱奇艺视频播放列表（第六章盒子模型）
<div><h2>热播</h2><ul><li><img src="../chapter04/练习4:制作爱奇异视频播放列表 ...
- 制作美容热点产品列表（第六章 盒子模型）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- 《自然语言处理（哈工大 关毅 64集视频）》学习笔记：第六章 markov模型
视频列表: 38 markov模型(一) 39 markov模型(二) 40 markov模型(三) 41 markov模型(四) 42 markov模型(五) 38 markov模型(一) 第六章 ...
- 初学者之CSS学习（六）盒子模型
<html> <head> <meta charset="utf-8"/> <title>盒子模型</title> &l ...
- Ruby on Rails Tutorial 第六章 用户模型
1.用户模型 (1)数据库迁移 Rails默认使用关系数据库存储数据,数据库中的表有数据行组成,每一行都有相应的列,对应数据属性.把列名命名为相应的名字后,ActiveRecord会自动把他们识别为用 ...
- Web前端第二季(CSS):七:第3章:盒子模型:306-盒子模型的外边距+307-外边距自动合并+308-边框样式+309-边框颜色和边框宽度
目录 一.目的 1.想:学习前端知识 2.想:记录笔记,下次不用看视频,直接看笔记就可以快速回忆. 二.参考 1.我自己代码的GitHub网址 1.SIKI学院:我参考此视频实操 1.w3school ...
- 一篇文章带你实操代码理解盒子模型
https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记 如有转载,请注明出处(如不注明,盗者必究) 目录 一.盒子模型 ...
- 【CSS基础】盒子模型、浮动布局、ps切图、定位及一些零碎知识点
该系列文章是博主学习前端入门课程的笔记,同时也为了方便查阅,有任何问题都欢迎在评论区提出.本文主要介绍CSS基础知识,包括盒子模型.浮动布局.PS切图.定位.元素的显示与隐藏和一些零碎知识点 思维导图 ...
- 前端学习日记（八）：css中字体、列表、鼠标形状、显示与隐藏、溢出处理、盒子模型的简单应用
一.字体样式(font) font-style [用于打开和关闭斜体文本] • normal 正常字体,关闭斜体 • italic 斜体 • oblique 模拟斜体 font-weight [为字体 ...
最新文章
- 吴恩达新课发布1天，引3万人观看 | 完整PPT
- Android ADB Server启动失败
- 研究生数学建模比赛日程安排
- DICOM：通讯模型
- HYSBZ - 1026 windy数(数位dp)
- php防止订单重复计算,php防止用户重复提交表单
- Spring Cloud微服务再谈微服务架构（七）
- orangepi获取cpu温度
- 大数斐波那契数列（nyoj655）光棍的yy
- 星巴克推出含萃取后咖啡粉制作的渣渣管；麦咖啡四款新品登陆全国1600家门店；可口可乐业绩恢复至疫情前水平 | 美通企业日报...
- LitJson的使用
- 单片机课程设计—简易频率计—课程设计任务书
- 读书笔记-反省使人成长
- 两台计算机数据传输网线如何做,两台电脑连线传送数据（备份计算机资源）
- 免费领7天腾讯视频VIP/优酷会员！
- 大数据的主要特征是什么？
- 第三方插件的引用(4):JAVA网站接入QQ登录
- mysql xtrabackup-v2_xtrabackup 备份问题
- php tp5 cms,thinkphpcms
- 2022年计算机一级MS Office模拟冲刺题及答案
热门文章
- java获取session失效时间_Java设置session超时（失效）的时间
- 爬虫工作流程、请求与响应原理、requests库讲解
- USS-INT指令详解
- 【系统故障】解决动态库路径错误导致ImportError: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.21‘ not found 的问题
- 创建型模式：单例模式
- 中国地图着色C语言实验报告,中国地图着色源代码
- Chrome Webdriver的下载安装
- 利用matlab实现DMD动态模态分解(在一维信号或二维流场矢量中的应用）
- 贪心算法适用条件_五大常用算法之三：贪心算法
- dig命令-dns查询