HTML+CSS复习第二天

这篇具有很好参考价值的文章主要介绍了HTML+CSS复习第二天。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

小米商城的案例,使用伪元素在图片周围加上边框线

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            background-color: #5F5750;
            width: 234px;
            height: 170px;
            padding: 3px;
            display: flex;
            flex-wrap: wrap;
            box-sizing: border-box;
        }

        li {
            width: 76px;
            height: 82px;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            flex-direction: column;
            align-items: center;
            position: relative;
            opacity: .7;
            transition: all .3s linear;
        }

        li:hover {
            opacity: 1;
        }

        /* 横线 */

        li::after {
            content: '';
            position: absolute;
            width: 64px;
            height: 1px;
            background-color: #665e57;
            top: 1px;
            left: 6px;
        }

        /* 竖线 */

        li::before {
            content: '';
            position: absolute;
            width: 1px;
            height: 70px;
            background-color: #665e57;
            top: 6px;
            left: 1px;
        }

        img {
            width: 24px;
            height: 24px;
        }

        div {
            padding-top: 4px;
            font-size: 12px;
            color: #ffffff;
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48"
                alt="">
            <div>保障服务</div>
        </li>
        <li>
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48"
                alt="">
            <div>保障服务</div>
        </li>
        <li>
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48"
                alt="">
            <div>保障服务</div>
        </li>
        <li>
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48"
                alt="">
            <div>保障服务</div>
        </li>
        <li>
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48"
                alt="">
            <div>保障服务</div>
        </li>
        <li>
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48"
                alt="">
            <div>保障服务</div>
        </li>

    </ul>
</body>

</html>

css边框设置

border是设置边框的
	border:1px solid #ccc --->这一种是复合写法
我们也可以分开写
border-style:线条 里面包含solid(实线)、dotted(点状)、dashed(虚线)、dobule(双实线)
border-color:设置边框的颜色
border-width:设置边框的大小
	

内边距和外边距

内边距使用:padding
存在四个值:代表的是上、右、下、左
存在三个值:代表的是 上 左右 下
存在两个值 : 代表的是 上下 左右
外边距使用margin:
使用的形式同上

css-背景

background0-color:背景颜色
background-image:背景图片
background-repeat:背景图是否平铺
background-size:背景图大小
background-position:背景图的位置

浮动

浮动的使用:使用float:left或者float:right
浮动产生的问题:
	脱离文档流
清除浮动的方法:
	使用伪元素
	给父盒子添加overflow:hidden
	在最后创建一个盒子使用clear:both
	给父盒子添加高度	

定位

position:relative 相对定位 相对于自己
position:absolute 绝对定位  脱离文档流
position:fiexd:固定定位        脱离文档流
position:static静态定位

盒子的显示与隐藏

三种方式:
	display:none/block  不占位置
	opacity:透明度 在0~1之间 占位置
	visibility:hidden 占位置

清除图片缝隙问题

1.给父盒子添加font-size:0
2.使用dispaly:block
3.使用vertical-align:middle

em和rem的使用

两者都是单位
em是相对于父元素来说的
rem是相对根元素(html)来说的

定位案例–制作瑞士国旗

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            position: relative;
            background-color: red;
        }
        
        .box div {
            background-color: #fff;
        }
        /* 横 */
        /*         
        .box div:first-child {
            width: 500px;
            height: 300px;
            position: absolute;
            top: 100px;
            left: 0;
        }
        
        .box div:last-child {
            width: 300px;
            height: 500px;
            position: absolute;
            top: 0;
            left: 100px;
        } */
        
        .box div:first-child {
            width: 300px;
            height: 80px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        
        .box div:last-child {
            width: 80px;
            height: 300px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <div class="box">
        <div></div>
        <div></div>
    </div>
</body>

</html>

z-index的使用

他是配合定位一起使用的,可以提高层级 默认值是0,可以是正负值

form表单的使用

表单类型包括
	textarea:文本域
	input:输入框
	select:下拉框
	按钮:button
	复选框按钮:input:checkbox
	input:file上传文件 等等。。。。

文章来源地址https://www.toymoban.com/news/detail-563822.html

到了这里,关于HTML+CSS复习第二天的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • HTML5CSS3提高

    HTML5 的新增特性主要是针对于以前的不足,增加了一些新的标签、新的表单和新的表单属性等。 这些新特性都有兼容性问题,基本是 IE9+ 以上版本的浏览器 才支持,如果不考虑兼容性问题,可以大量使用这些新特性。 以前布局,我们基本用 div 来做。div 对于搜索引擎来说,

    2024年02月14日
    浏览(52)
  • 尚硅谷html5+css3(3)布局

    1.文档流normal flow -网页是一个多层结构 -通过CSS可以分别为每一层设置样式 -用户只能看到最顶层 -最底层:文档流(我们所创建的元素默认都是从文档流中进行排列) 2.盒子模型   1.盒子模型-边框 2.盒子模型-内边距 3.盒子模型-外边距 4.盒子模型-水平方向的布局 5.盒子模型

    2024年04月09日
    浏览(63)
  • html5和css3的新特性

    标签         !-- 高亮 mark --         !-- 摘要概述 --         details             summary                 咖啡             /summary             ul                 li拿铁/li                 li美式/li             /ul         /details           

    2024年02月11日
    浏览(42)
  • [HTML]Web前端开发技术7(HTML5、CSS3、JavaScript )CSS的定位机制——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 CSS的定位机制 文档流定位 元素类型   浮动定位 float的用处 float的特点 clear属性 层定位 position属性

    2024年02月05日
    浏览(72)
  • HTML5+CSS3实现小米商城 (完整版)

    对于小米商城,也是自己初学前端的一个小作品吧,这个网页大概写了有三四天吧,总体感受就是写着还行,只要有耐心,就一定能成功。 毕竟第一次做,代码写的可能比较乱,命名可能也不是太规范,以后多加改正。 基本还原了原网页,并且只用到了CSS3和HTML5。 链接:

    2024年02月04日
    浏览(49)
  • h5(html5)+css3前端笔记二

    一、表格标签 表格的主要作用: 表格主要用于 显示、展示数据 ,因为它可以让数据显示的非常的规整,可读性非常好。特别是后台展示数据的时候,能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。 1. table/table 用来定义表格的标签

    2024年02月14日
    浏览(65)
  • HTML5+CSS3+移动web 前端开发入门笔记(二)HTML标签详解

    排版标签用于对网页内容进行布局和样式的调整。下面是对常见排版标签的详细介绍: 标题使用至标签进行定义。定义最大的标题,定义最小的标题。具有align属性,属性值可以是:left、center、right。 将给定的HTML代码转换为Markdown格式的标题标签如下所示: 效果演示: H3:

    2024年02月07日
    浏览(69)
  • 响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 第1章 HTML5+CSS3初体验 项目1-1 三栏布局页面

    三栏布局是一种常用的网页布局结构。 除了头部区域、底部区域外,中间的区域(主体区域)划分成了三个栏目,分别是左侧边栏、内容区域和右侧边栏,这三个栏目就构成了三栏布局。当浏览器的宽度发声变化时,页面中左侧边栏和右侧边栏的宽度固定不变,而内容区域的

    2024年01月17日
    浏览(85)
  • 携程网移动端首页制作(html5+css3)

    主要是自己做记录,记录做的过程以及遇到的一些问题 1.首先引入normal.css(Normalize.css: Make browsers render all elements more consistently.)。其中搜索符号使用图标,阿里图标(iconfont-阿里巴巴矢量图标库):打开网址搜索需要的图标,添加到自己的项目中,点击“download code” ,下载

    2024年02月05日
    浏览(44)
  • HTML5+CSS3实现小米官网(完整版)

    小米官网其实是一个结构非常简单的网页,相比与小米商城,难度降低了很多很多。我也写过一次小米商城,可以移步到我的主页。本篇文章简单分析一下小米官网的静态结构,文章末尾附源代码和素材。 先展示一下页面的效果吧! 1. 头部导航栏 头部导航栏可以用 fixed 定位

    2024年02月13日
    浏览(82)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包