Html与CSS学习记录三

于 2018-10-11 21:59:45 发布
阅读量962 收藏 4
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34117624/article/details/83006789
版权
这篇博客探讨了HTML和CSS的实用技巧，包括元素的显示与隐藏、溢出隐藏、鼠标样式、文本域属性、垂直对齐、精灵图的使用、字体图标以及行高设置。还详细介绍了京东首页的仿写过程，涉及到头部分析、快捷导航栏的布局以及CSS样式的应用。
摘要由CSDN通过智能技术生成

元素的显示与隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: blue;
            display: block;         none:隐藏某个元素，不保留位置      
            visibility: visible;    hidden：隐藏某个元素，保留位置
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

案例：仿土豆显示透明盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        a{
            display: block;
            width: 448px;
            height: 252px;
            margin: 100px;
            position: relative;
        }
        .mask{
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,.4) url("images/arr.png") no-repeat center;
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }
        a:hover .mask{
            display: block;
        }
    </style>
</head>
<body>
<a href="#">
    <img src="images/tudou.jpg" height="252" width="448">
    <div class="mask"></div>
</a>
</body>
</html>

溢出隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 1px solid blue;
            overflow: hidden;   溢出隐藏
                       scroll    显示滚动条
                       auto      自动
        }
    </style>
</head>
<body>
    <div>
        啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
        ...许多文字...
    </div>
</body>
</html>

鼠标样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            cursor: move;     拖拉十字架样式
                     pointer   小手样式
                     text      默认的那个文本选择的，有点像大写的 I
                     default   不发生变化
        }
    </style>
</head>
<body>
    <div>
        啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
        ...许多文字...
    </div>
</body>
</html>

轮廓线和文本域宽高属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        input{
            outline: none;       获得焦点之后，默认有一个轮廓线通过这个属性，可以取消轮廓线
            border: 1px solid #ccc;
            width: 200px;
            height: 25px;
            background: url("images/s.png") no-repeat 180px center;
        }
        textarea{
            resize: none;         取消文本域的可拖拉效果
        }
    </style>
</head>
<body>
    <input type="text">
    <textarea cols="30" rows="20"></textarea>  cols:英文单词是列，这里设置宽的  rows:设置高
</body>
</html>

垂直对齐的使用：vertical-align

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img{
            vertical-align: middle;
        }
        div{
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <div>
        <img src="images/tudou.jpg" height="252" width="448">
        hello world
    </div>
</body>
</html>

溢出文本通过省略号来进行显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            padding: 30px;
        }
        li{
            list-style: none;
            width: 200px;
            height: 30px;
            border: 1px solid blue;
            white-space: nowrap;     强制同一行显示，除非遇到br标签
            overflow: hidden;
            text-overflow: ellipsis; 溢出的部分使用省略号代替
            line-height: 30px;
        }
    </style>
</head>
<body>
    <ul>
        <li>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</li>
        ...多个li标签...
    </ul>
</body>
</html>

精灵图的使用：减轻服务器高并发压力。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        h3{
            background: url("images/index.png") no-repeat -2px -184px;
            width: 26px;
            height: 26px;
        }
        div{
            width: 236px;
            height: 106px;
            background: url("images/index.png") no-repeat 0 -350px;
        }
    </style>
</head>
<body>
    <h3></h3>
    <div></div>
</body>
</html>

案例：精灵图，获取自己的名字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        span{
            display: inline-block;
            background: url("images/abcd.jpg") no-repeat;
        }
        .aa{
            width: 108px;
            height: 110px;
            background-position: 0 -9px;
        }
        .n{
            width: 112px;
            height: 110px;
            background-position: -255px -276px;
        }
        .d{
            width: 97px;
            height: 107px;
            background-position: -363px -8px;
        }
        .y{
            width: 110px;
            height: 110px;
            background-position: -367px -556px;
        }
    </style>
</head>
<body>
    <span class="aa"></span>
    <span class="n"></span>
    <span class="d"></span>
    <span class="y"></span>
</body>
</html>

案例：微信滑动门效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            background:url("images/wx.jpg") repeat-x;
        }
        .nav li{
            float: left;
        }
        .nav a{
            height: 33px;
            line-height: 33px;
            color: #fff;
            text-decoration: none;
            background: url("images/to.png") no-repeat;
            display: inline-block;
            padding-left: 15px;
        }
        .nav span{
            background: url("images/to.png") no-repeat right;
            display: inline-block;
            height: 33px;
            padding-right: 15px;
        }
        .nav a:hover{
            background-image: url(images/ao.png);
        }
        .nav a:hover span{
            background-image: url(images/ao.png);
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li>
            <a href="#">
                <span>首页</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span>客户端</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span>微信小程序</span>
            </a>
        </li>
    </ul>
</body>
</html>

字体图标的使用：一些可以当做字体的图标。使用需要先官网下载，使用也用固定的格式。

    *下载的压缩包不要删除，里边有一些东西，图标显示的时候要使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        @font-face {            声明字体  引用字体，固定格式不需要记忆
            font-family: "icomoon";  我们自己起名字可以
            src:  url('fonts/icomoon.eot?7kkyc2');   兼容ie，四种格式需要导入四次
            src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
            url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
            url('fonts/icomoon.woff?7kkyc2') format('woff'),
            url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
            font-style: normal;    倾斜字体正常
        }
        span{
            font-family: 'icomoon';
            font-size: 100px;
            color: blue;
            fond-style:normal;
        }
        .car{
            font-family: 'icomoon';
        }
    </style>
</head>
<body>
    <span></span>
    <div class="car"></div>     上边那个注意说的就是这里，看到div中间的那个东西，字体图标需要使用的就是，压缩包中demo.html中粘过来的。
</body>
</html>

行高不带单位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            line-height: 2;   不带单位表达的是倍数，如这里值得是，32px
        }
        div{
            border: 1px solid black;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div>行高不带单位</div>
</body>
</html>

综合案例：京东首页仿写，一小部分实现。

     * title 的复制

     *tab中ico的显示。( https://www.jd.com/favicon.ico  所有的网站都可以通过这种方式来获取，ico图标，注：不是图片)

     *导入初始化css  normalize.css

     *base.css中写入一些公共的类样式，供直接使用，如版心的宽、位置。头部和底部的样式

     *导入首页的css样式  index.css

     *头部的分析：一个黑色的背景+居中的版心+关闭的按钮分析之后，就可以代码实现了。

     *快捷导航栏：左边和右边两个。清除padding和margin。

     *header部分的编写：其中包含多个元素并且使用了绝对定位来实现排版。logo+搜索框+搜索框底部热词+右部的定位图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
    <!--网站说明,浏览器访问时，显示的文字声明-->
    <meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
    <!--关键字，进行搜索时的查找关键字-->
    <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />
    <link rel="shortcut icon" href="favicon.ico"/>       标题图片
    <link rel="stylesheet" href="css/normalize.css">     默认设置
    <link rel="stylesheet" href="css/base.css">          公用的设置
    <link rel="stylesheet" href="css/index.css">         首页的设置
</head>
<body>
    <!--顶部开始-->
    <div class="J_event">                                  顶部的背景
        <a href="#" class="w">
最低0.47元/天 解锁文章
毋十三
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值