第五章 CSS3美化网页元素
2024-06-04 00:35:35
1，制作北大青鸟课程介绍页面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>北大青鸟</title><style>body{background: linear-gradient(to left,#ececec,#ffffed);}div:nth-of-type(1){color: #5c9815;line-height: 30px;}div:nth-of-type(2){color: #f26522;line-height: 30px;}span{color: #FFFFFF}.title{background:#668800;}.title1{background: #0D7114}.title2{background:deepskyblue }.title3{background:blue }.title4{background:#220088;}.title5{background: #ff5511;}.title6{background: #FF0000;}.title7{background: #ff0088;}.title8{background: #880000;}.title9{background: #7700bb;}.title10{background: #550088;}</style>
</head>
<body>
<img src="css/title.gif">
<p><img src="css/img_01.png"></p>
<div><span class="title" >逆向课程设计：</span>以企业需求决定课程设计内容，确保训练内容及深度和企业需求<br>一致<br><span class="title1">模拟学员学习路线：</span>强调难点和复杂技能点的反复训练，力求学习效果和学习体<br>验<br><span class="title2">互联网作为教学环境：</span> 学员的日常教学和训练均在互联网线上进行<br><span class="title3">学习挡板监控网上学习效果：</span> 每个学习阶段设置线上线下测试，严密监控学习效<br>果<br><span class="title4">真实开发项目经验积累：</span> 采用专业互联网企业提供的真实项目作为模拟开发</div>
<p><img src="css/img_02.png"></p>
<div><span class="title5">实用性——</span>以就业岗位需求为导向，重点讲解企业80％的时间在使用的20％<br>的技术<br><span class="title6">权威性——</span>与来自百度等知名企业的专家联合开发<br><span class="title7">专业性——</span>引进业内资深人才和典型行业开发项目<br><span class="title8"> 真实性——</span>在互联网真实环境下进行教学和训练<br><span class="title9">易学性——</span>在线培训模式，24小时专家在线解答疑难问题<br><span class="title10">完整性——</span>利用SNS虚拟社区：学习、人脉双丰收</div>
</body>
</html>2，制作席慕容的诗《初相遇》
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>初相遇</title><style>body{line-height: 40px;background: linear-gradient(to left,#caeffe,#FFFFED);width: 600px;}.h1{color: #999999;font-size: 24px;font-family: 楷体;}h2,span{vertical-align: middle;}h1{color: #1F87CC ;text-shadow:black 2px 2px 2px;}p .title,.back span{color:blue;font-size: 24px;text-shadow:rgba(0,0,0,0.5)3px 3px 3px;font-weight: bold}p .title1,.back1 span{color: #1F87CC;font-size: 24px;font-weight: bold;font-style: italic;}p.title2,.back2 span{color: #0D7114;text-decoration: underline;font-family: 宋体}</style>
</head>
<body>
<h1 style="text-align: center">初相遇<span class="h1"> 文/席慕容</span></h1>
<p style="text-indent: 2em"><span class="title">美</span>丽的梦和美丽的诗一样，都是可遇而不可求的，常常在最没能料到<br>的时刻里出现。</p>
<p class="back1" style="text-indent: 2em">我喜欢那样的梦，在梦里，一切都可以重新开始，一切都可以慢慢解<br>释，心里 甚至还能感觉到，所有被浪费的时光竟然都能重回时的狂喜与感<br>激。<span>胸怀 中满溢着幸福，只因你就在我眼前</span>，对我微笑<br>，一如当年。</p>
<p class="back2" style="text-indent: 2em"><span>我喜欢那样的梦，明明知道你已为我跋涉千里，却又觉得芳草鲜美，落<br>落英缤纷，好像你我才初相遇。</span></p>
</body>
</html>3，制作淘宝女装分类页面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>淘宝女装分类页面</title><style>ul{font-size: 18px;font-weight: bold;}ul li{font-size: 12px;list-style: none;}a{text-decoration: none;color: black;}a:hover{color: #f60;text-decoration: underline;}img ,ul{vertical-align: middle;}</style>
</head>
<body>
<ul><img src="css/dress01.png" >夏季流行<hr ><li ><a href="">夏季新品</a> <a href="" >雪纺裙</a> <a href="">短袖T </a><a href="">铅笔裤</a> <a href="">短裤</a> <a href="">短袖衬衫 </a><a href="">小脚<br>牛仔裤 </a><a href="">开衫</a><a href=""> 蕾丝/雪纺衫</a><a href="">韩版外套 </a><a href="">小西装 </a><a href="">中长款裙</a> </li>
</ul>
<ul><img src="css/dress02.png" >上装<hr ><li ><a href="">T恤</a> <a href="" >衬衫</a> <a href="">针织衫 </a><a href="">长袖T</a> <a href="">韩版T</a> <a href="">情侣衫 </a><a href="">雪纺衬衫</a><a href="" >韩版<br>衬衫 </a><a href="">防嗮衣</a><a href=""> 休闲套装</a><a href="">卫衣</a><a href="">背心/吊带 </a> </li>
</ul>
<ul><img src="css/dress03.png" >裙子<hr ><li ><a href="">连衣裙</a> <a href="" >半身裙</a> <a href="">长裙</a><a href="">短袖裙</a> <a href="">蕾丝连衣裙</a> <a href="">长袖裙 </a><a href="">无袖/背心<br>裙</a><a href="" >A字裙 </a><a href="">牛仔裙</a><a href=""> 半身中长裙</a><a href="">半身短裙</a><a href="">包臀裙 </a> </li>
</ul>
<ul><img src="css/dress04.png" >裤子<hr ><li ><a href="">裤子</a> <a href="" >休闲裤</a> <a href="">牛仔裤 </a><a href="">打底裤</a> <a href="">长裤</a> <a href="">哈伦裤 </a><a href="">阔腿裤</a><a href="" >短裤/热<br>裤 </a><a href="">连体裤</a><a href=""> 七/九分裤</a><a href="">牛仔短裤</a><a href="">西装裤 </a> </li>
</ul>
<ul><img src="css/dress05.png" >其他女装<hr ><li ><a href="">胖M装</a> <a href="" >中老年</a> <a href="">婚纱</a><a href="">礼服</a> <a href="">旗袍</a> <a href="">夜店 </a><a href="">舞台装</a><a href="" >唐装 </a><a href="">职业装</a></br><a href=""> 全球购</a><a href="">羊绒衫</a><a href="">毛衣 </a> <a href="">呢大衣</a> <a href="">羽绒服</a><a href="">真皮皮衣</a> </li>
</ul>
</body>
</html>第五章 CSS3美化网页元素相关推荐
- 第五章 CSS美化网页元素
练习1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- HTML5 第五章CSS3美化网页课后作业
制作北大青鸟课程介绍页面 <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
- css3美化网页元素 第五章
第一题:制作北大青鸟课程介绍页面. .A{width:620px;background-color:#f3f4df;background: linear-gradient(to bottom,#ece ...
- HTML第5章：CSS3美化网页元素：课后作业
1.制作图5.38所示的北大青鸟课程介绍页面.页面要求如下, >使用<div>.<p>.<span>等标签编辑页面,页面整体背景颜色使用线性渐变 (#ECEC ...
- 第五课 CSS美化网页元素
为什么用CSS 1.有效的传递页面信息 2.使用CSS美化过的页面文本,使页面漂亮.美观,吸引用户 3.可以很好的突出页面的主题内容,使用户第一眼可以看到页面主要内容 4.具有良好的用户体验 编辑网页 ...
- CSS 美化网页元素
文章目录 1.为什么要美化网页元素 2.span标签 3.字体样式 4.文本样式 4.1.颜色 4.2.文本对齐的方式 4.3.首行缩进 4.4.行高 4.5.装饰 5.超链接伪类以及文本阴影 6.列 ...
- CSS——美化网页元素（字体样式，文本样式，阴影，超链接伪类，列表，背景，渐变）
为什么要美化网页 1.1有效的传递页面信息 1.2美化网页,页面漂亮,才能吸引用户 1.3凸显页面主题 1.4提高用户体验 span标签:重点要突出的字使用该标签套起来 <!DOCTYPE ht ...
- CSS美化网页元素大全
< span>标签 作用:能让某几个文字或者某个词语凸显出来 1.CSS 字体属性 属性 描述 font 简写属性.在一条声明中设置所有字体属性,简写顺序:字体风格→字体粗细→字体大小→字 ...
- python编写网页美化_五 使用并美化网页文本
属性值 说明 bold 定义粗体字体 bolder 定义更粗的字体,相对值 lighter 定义更细的字体,相对值 normal 默认值,标准字体 属性值 说明 normal 默认值. oblique ...
最新文章
- Ext结合DWR的关键代码（运行成功的DWRProxy）
- 【Java 并发编程】线程简介 ( 原子操作 | volatile 关键字使用场景 )
- 计算机操作系统：虚拟存储器
- ERP(Enterprise Resource Planning)
- gridcontrol 控件的用法
- SAP CDS view(Core Data Service)自学的一些材料和方法
- BigDecimal踩过的大坑
- USACO2.11 The Castle hdu1198
- 华扬联众携手搜狗，助雅诗兰黛跃居女神节“C位”
- 什么叫做展望_在迷茫的时代，选择相信：关于2021经济的一些展望。
- 1分钟玩转Kafka
- 世界摩天大楼2009年排名
- POP介绍与使用实践(快速上手动画)
- CNN for Sentence Classification-textcnn阅读笔记
- 数据一致性(CAP原则)
- SPSS详细操作：生存资料的Cox回归分析
- 阿里云上云迁移工具案例实践：腾讯云迁移到阿里云
- 135编辑器嵌入html,135编辑器教程|三步教你搞定表格样式
- ngrok使用/踩坑分析-http代理
- JAVA设计模式之概述