潭州学院html学习（day10）
2024-04-28 03:00:50
完成以上的作业布置
代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>作业1</title><style>*{padding: 0;margin: 0;}a{text-decoration: none;color: inherit}ul,ol{list-style: none;}/*外层包裹的盒子*/.wrap{width:1187px;background: rgb(255,255,255);border: 3px solid #cccccc;margin: 50px auto;}/*导航栏部分*/.nav{width: 700px;margin: 10px auto;}.nav>ul{display:flex;}/*导航栏字体的设置*/.nav>ul li a{padding: 0 18px;font-family: 宋体;font-size: 14px;border-left: 1px solid #cccccc;}/*鼠标在导航栏字体时的变化*/.nav>ul li a:hover{text-decoration:underline;color: hotpink;cursor: pointer; /* 当鼠标移入元素，手指状 */}/*使第一个li的左边框消失*/.nav>ul li:nth-child(1) a{border-left: none;}.mainbody>ul{display: flex;}.mainbody>ul img{display: block;}.mainbody>ul li:nth-child(4) img{display: inline-block;}.mainbody>ul li:nth-child(2){border-left: 1px solid #cccccc ;}.mainbody>ul li:nth-child(2){border-right: 1px solid #cccccc ;}.mainbody>ul li:nth-child(3){border-right: 1px solid #cccccc ;}.mainbody>ul li:nth-child(2) img:nth-child(1){border-bottom: 1px solid #cccccc;}.mainbody>ul li:nth-child(3) img:nth-child(2){border-bottom: 1px solid #cccccc;border-top:1px solid #cccccc;}.mainbody>ul li:nth-child(4) img:nth-child(1),.mainbody>ul li:nth-child(4) img:nth-child(2){border-bottom:1px solid #cccccc;float: left;}.mainbody>ul li:nth-child(4) img:nth-child(1){border-right: 1px solid #ccc;}.mainbody>ul li:nth-child(4) img:nth-child(3){width: 424px;}.mainbody>ul li:nth-child(1){position: relative;}img{ vertical-align: bottom;}.mainbody{background-color: rgb(255,255,255);}</style>
</head>
<body><div class="wrap"><div class="nav"><ul><li><a href="#" >护肤</a></li><li><a href="#" >彩妆</a></li><li><a href="#" >美发</a></li><li><a href="#" >香氛</a></li><li><a href="#" >肌肤</a></li><li><a href="#" >产品</a></li><li><a href="#" >唇部</a></li><li><a href="#" >精华</a></li><li><a href="#" >修护</a></li></ul></div><div class="mainbody"><ul><li><img src="../images/1.jpg" alt=""></li><li><img src="../images/2.jpg" alt=""><img src="../images/3.jpg" alt=""></li><li><img src="../images/4.jpg" alt=""><img src="../images/5.jpg" alt=""><img src="../images/6.jpg" alt=""></li><li><img src="../images/7.jpg" alt=""><img src="../images/8.jpg" alt=""><img src="../images/9.jpg" alt=""></li></ul></div></div>
</body>
</html>代码二：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>作业2</title>
</head>
<style>*{padding: 0;margin: 0;}a{text-decoration: none;color: inherit;}ul,ol{list-style: none;}.banner{width: 1000px;height: 500px;position: relative;margin: 50px auto;}.banner .line{border-top:1px solid #cccccc;position: relative;}.banner .line .box{background-image: url("../images1/1.jpg");background-position: -44px 88px;left: calc(50% - 152px);position: absolute;width: 320px;height: 89px;top:-48px;}.banner .main{position: absolute;top: 55px;width: 1000px;height: 500px;box-shadow: 0 0 10px 0 #000;}.pic li{position: absolute;display: none;}.pic li.on{display: block;}.btn p{position: absolute;top: calc(50% - 25px);width: 50px;height: 50px;background-image: url("../images1/2.png");}.btn p:nth-child(1){left: 0;background-position: -10px -90px;}.btn p:nth-child(2){right: 0;background-position: 2px -160px;}.shade{height: 154px;width: 887px;background-color:rgb(76,76,76) ;float: left;position: relative;z-index: 1;top:-100px;left: 223px;}.shade .box1{height: 83px;width:353px;font-family: 宋体;color: white;font-size:30px;position: relative;border-right:1px solid white ;text-align: center;top:40px;margin: 10px;}.shade .box2{height: 83px;width:536px;font-family: 宋体;color: white;font-size: 15px;padding: 1px auto;position: relative;text-align: right;top:-50px;margin: 5px auto;float: right;}.shade .box1 p{padding: 0;}.circle {width: 2px;height: 2px;background: black;-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px;}.circlr>ul li{position: absolute;float: left;display: block;padding: 5px;top:50px;z-index: 2;}.circle>ul{display: flex;}
</style>
<body><div class="banner"><div class="line"><div class="box"></div></div><div class="main"><div class="pic"><ul><li class="on"><a href="" ><img src="../images1/3.jpg"></a></li><li><a href=""><img src="../images1/4.jpg" alt=""></a></li><li><a href=""><img src="../images1/5.jpg" alt=""></a></li><li><a href=""><img src="../images1/6.jpg" alt=""></a></li></ul></div></div><div class="btn"><p></p><p></p></div></div><div class="shade"><div class="box1"><p>5分钟就能搞定的时髦派对装 秒杀大红唇和烟熏眼</p></div><div class="box2"><p>红唇和烟熏妆装曾经是派对的"标配"，这个过时的规则早该打破了。今年秋天的彩妆流行是简洁时髦的美感：一抹亮片眼影，一个出其不意的眼线，一只镇住全场的唇膏。既然能花5分钟就搞定的派对装，为什么要花一个小时呢？</p></div></div><div class="circle"><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul></div></div>
</body>
</html>转载于:https://www.cnblogs.com/yuyiWang/p/9404687.html
潭州学院html学习（day10）相关推荐
- 潭州学院html学习（day03）
一.img图像标签 图片的格式=名称加后缀名 图片的后缀名: 1. jpg: 常用格式 2 .png:常用格式 透明图片 ( 背景由灰白格子交错形成,但在页面在中不会显示出来) 3.gif: 常 ...
- 潭州学院html学习（day09）
一.表单 action="http:www.baidu.com" 提交表单的后台地址 method='get' 提交表单的方式(post/get) 表单元素:input ...
- 潭州学院html学习（day01）
一.什么是HTML 超文本编辑语言(简称:HTML),前端开发人员要和浏览器沟通,就要用到浏览器所能识别的语言(HTML超文本标记语言),所以HTML是一门浏览器能够识别的语言. 二.HTML的结构 ...
- 潭州学院html学习（day08）
一.浮动 浮动是css布局里面用的最多的属性 浮动:使元素脱离文档流,按照指定方向(左右)发生移动,遇到父边界或者相邻的浮动元素停了下来. 文档流: 是文档中可显示对象在排列时所占用的位置/空间(在页 ...
- 潭州学院html学习（day07）
一.完成以上的效果图 实例代码: <!DOCTYPE html> <html lang="en"> <head><meta charset ...
- 潭州学院html学习（day04）
一.毗邻选择器 相邻兄弟选择器(Adjacent sibling selector)可选择紧邻在另一元素后的元素,且两者有相同的父类 实例代码: 1 <!DOCTYPE html> 2 & ...
- 潭州学院html学习（day05）
一.盒子模型(本文部分内容摘自:https://www.cnblogs.com/smyhvae/p/7256371.html) 盒子模型原理 盒子模型(box model).无论div,span,a都 ...
- 潭州学院html学习（day02）
补充 <html>标签: 标记标签通常被称为HTML标签(html tag) 由尖括号组成的关键词,比如<html> 标签成对出现,第一个开始标签(开放),第二个结束标签(闭合 ...
- 潭州学院html学习（day06）
一.背景概述 背景的相关属性: backageage(背景颜色) backage-image(背景图片) backage-repeat(是否平铺) backage-position(背景的位置) ba ...
最新文章
- 如何kill同一个应用的所有进程
- 史上最强：numpy实现全部机器学习算法
- tableau实战系列（三十五）-教你画个不一样的圆角条形图
- 公司内部图书管理界面原型设计图
- CVPR 2018 SINT++:《SINT++: Robust Visual Tracking via Adversarial Hard Positive Generation》论文笔记
- WebRTC编译系统之GYP，gn和ninja
- hadoop高速扫盲帖，从零了解hadoop
- Windows CE.0002.ERROR:Image is too large for current RAM and RAMIMAGE settings.
- java导入错误怎么解决_eclipse导入文件及导入错误的解决方法
- java域名解析到目录_nginx将泛解析的匹配域名绑定到子目录配置方法
- linux远程拷贝快捷键远程,linux命令scp远程拷贝
- visio自己画的图怎么填充_Visio怎么画直线并填充颜色?
- quartz mysql 配置_Quartz框架（一）—Quartz的基本配置
- XP下 无法定位程序输入点WSAPoll于动态链接库ws2_32.dll 的解决办法
- django下载或者导出文件
- 移动硬盘无法访问需要格式化，怎样恢复移动硬盘数据
- Computer-System Structures八大思想
- 2023年网络安全HW攻防技术总结（珍藏版）
- 针对前端初级学者，如何在windows下搭建react-native环境详细教程
- 响应式网站设计（2）-关于网站制作你不知道的那些文件儿