CSS3开坑_不定期更新

最新推荐文章于 2024-03-19 17:28:18 发布

xiaoyuyulala

最新推荐文章于 2024-03-19 17:28:18 发布

阅读量225

点赞数

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.csdn.net/qq_42192672/article/details/87475363

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

自己之前稍微开了一下html5的坑，换一个心情，记录一下自己从0学CSS3遇到的一些知识点

主要的学习资料就还是HTML5+CSS3从入门到精通以及一些网上的资料

选择器

介绍

其实一开始我都没听说过这名词，后来发现就是指# .classname这些定义CSS的方法

就先罗列一下选择器的种类吧，遇到了慢慢学就好：

元素选择器；关系选择器；属性选择器；伪类选择器；伪对象选择器

案例样式

里面会涉及到不少选择器，效果我就不展示了，标一下注释给自己看看

按钮样式

<!DOCTYPE html>
<html lang="en">
<style>
    ul{list-style: none;}
    a.button{
        display: block;float: left;
        position: relative;
        height: 25px; width: 120px;
        margin: 0 10px 18px 0;
        text-decoration: none;
        font: 12px 'Helvetica Neue',Helvetica,Arial;
        font-weight: bold;
        line-height: 25px;
        text-align: center;
    }
    .gray{
        color:#555;
        border-bottom: 4px solid #b2b1b1;
        background: #eee;
    }
    .gray:hover{background: #e2e2e2;}
    /*设置元素在其鼠标悬停时的样式*/
    a.button:before,a.button:after{
        content: '';
        height: 25px;
        width: 120px;
        left: -1px;
        bottom: -1px;
        position: absolute;
        border-radius: 3px;
    }
    /*伪对象选择器*/
    a.button:before{
        height: 23px;
        bottom: -4px;
        border-top: 0;
        border-radius: 0 0 3px 3px;
        box-shadow: 0 1px 1px 0 #bfbfbf;
        /*阴影*/
    }
    a.button{border-radius: 3px;}
    /*圆角*/
</style>
<head>
    <meta charset="UTF-8">
    <title>按钮</title>
</head>
<body>
    <ul id="container">
        <li><a href="#" class="button gray">灰色风格按钮</a></li>
        <li><a href="#" class="button pink">粉红风格按钮</a></li>
        <li><a href="#" class="button blue">蓝色风格按钮</a></li>
        <li><a href="#" class="button green">绿色风格按钮</a></li>
        <li><a href="#" class="button turquoise">天蓝色风格按钮</a></li>
        <li><a href="#" class="button black">黑色风格按钮</a></li>
        <li><a href="#" class="button darkgray">深灰色风格按钮</a></li>
        <li><a href="#" class="button yellow">黄色风格按钮</a></li>
        <li><a href="#" class="button purple">紫色风格按钮</a></li>
        <li><a href="#" class="button darkblue">银灰色风格按钮</a></li>
    </ul>
</body>
</html>

列表样式

这个样式蛮有意思的，我试着做一个手机上小说的目录，蛮有趣的，但遗憾的是找不到好的背景图，比如显示榜单排名热度的标识，本来是打算标识是有颜色的正好，现在就有点枯燥了

<!DOCTYPE html>
<html lang="en">
<style>
    #wrap{
        height: 276px;
        width: 260px;
    }
    #wrap ul{
        list-style-type: none;
        margin: 0;
        padding: 0;
        font-size: 16px;
        color: #777;
    }
    #wrap li{
        line-height: 30px;
        padding: 1px 0 0 28px;
    }
    #wrap li a{
        text-decoration: none;
        color: #777;
    }
    #wrap li a:hover{color: #F63;}
    #wrap li:first-child{
        font-size: 19px;
        color: #81736c;
    }
    /*第一个子元素*/
    #wrap li:nth-child(2){font-weight: bold;}
    /*第二个子元素*/
</style>
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
    <div id="wrap">
        <ul id="container">
            <li>双周热门推荐</li>
            <li><a href="#">呐喊</a></li>
            <li><a href="#">三体-死神永生</a></li>
            <li><a href="#">白菜鸡肉粉丝包</a></li>
            <li><a href="#">可爱的xiaoyuyu</a></li>
            <li><a href="#">南师虽去，精神永存</a></li>
            <li><a href="#">出师表</a></li>
            <li><a href="#">高等数学A</a></li>
            <li><a href="#">老九门</a></li>
        </ul>
    </div>
</body>
</html>

还有一些蛮有用的伪类比如:disabled;:enabled;:target;:checked都是挺实用的

文本模块

文字怎么书写其实挺细的，就先介绍一些我自己觉得比较常用的吧，反正也是给自己看的233，案例比较靠谱

案例样式

火焰一般的特效字（text-shadow）

<!DOCTYPE html>
<html lang="en">
<style>
    body{background: #000;}
    p{
        text-align: center;
        font: bold 60px helvetica,Arial,sans-serif;
        color: red;
        text-shadow: 0 0 4px white,
            0 -5px 4px #ff3,
            -2px -15px 11px #fd3,
            2px -25px 18px #f20;
    }
</style>
<head>
    <meta charset="UTF-8">
    <title>Text</title>
</head>
<body>
    <div>
        <p>HTML+CSS3</p>
    </div>
</body>
</html>

在这里插入图片描述

content与before和after的配合

这个其实emmmm，我还想不出实际意义，可能所有有相同元素的模块都漏东西没加上，用这一招同意增加还是不错的，就不用麻烦js了

<!DOCTYPE html>
<html lang="en">
<style type="text/css">
    a[href $=".pdf"]:after{content: url(xiaoyuyu.jpg)}
    a[rel = "external"]:after{content: "xiaoyuyu"}
</style>
<head>
    <meta charset="UTF-8">
    <title>Content</title>
</head>
<body>
    <a href="http://www.book.com/1688.pdf">HTML+CSS从入门到精通</a><br>
    <a href="http://www.book.com/1688/" rel="external">HTML+CSS从入门到精通</a>
</body>
</html>

能插入的还蛮多的，string/attr/url，挺实用的

网络字体@font-face

<!DOCTYPE html>
<html lang="en">
<style type="text/css">
    @font-face {
        font-family: "lexograph";
        src: url(http://randsco.com/fonts/lexograph.eot);
        src: local("lexographer"),url(http://randsco.com/fonts/lexograph.ttf)format("truetype");
    }
    h1{
        font-family: lexograph,Verdana,sans-serif;
        font-size: 4em;
    }
</style>
<head>
    <meta charset="UTF-8">
    <title>Font-face</title>
</head>
<body>
    <h1>https://woaixiaoyuyu.github.io/</h1>
</body>
</html>

有些时候会有问题，也很迷，但格式差不多就是这样，反正特殊字体，还是换成图片靠谱点，如果数量不多的话

Background

主要就是背景图的操作，CSS3新增了不少

案列样式

设计优惠券（径向渐变）

<!DOCTYPE html>
<html lang="en">
<style type="text/css">
    .stamp{
        width: 387px;
        height: 140px;
        padding: 0 10px;
        position: relative;
        overflow: hidden;
    }
    /*before 设计底色*/
    .stamp:before{
        content: "";
        position: absolute;
        z-index: -1; /* 让该层在文本层下面*/
        top: 0;
        bottom: 0;
        left: 10px;
        right: 10px;
    }
    /*after 设计底色阴影*/
    .stamp:after{
        content: "";
        position: absolute;
        left: 10px;
        top: 10px;
        right: 10px;
        bottom: 10px;
        box-shadow: 0 0 20px 1px rgba(0,0,0,0.5);
        z-index: -2;  /*最底部*/
    }
    /*设计高亮面*/
    .stamp i{
        position: absolute;
        left: 20%;
        top: 45px;
        height: 190px;
        width: 390px;
        background-color: rgba(255,255,255,.15);
        transform: rotate(-30deg);
    }
    /*设计左侧文本*/
    .stamp .par{
        float: left;
        padding: 16px 15px;
        width: 220px;
        border-right: 2px dashed rgba(255,255,255,.3);
        text-align: left;
    }
    /*文本样式*/
    .stamp .par p{
        color: #fff;
        margin: 6px 0;
    }
    .stamp .par span{
        color: #fff;
        margin-right: 5px;
        font-size: 50px;
    }
    .stamp .par .sign{font-size: 34px;}
    .stamp .par sub{
        position: relative;
        top: -5px;
        color: rgba(255,255,255,0.8);
    }
    .stamp .copy{
        display: inline-block;
        width: 100px;
        vertical-align: text-bottom;
        color: rgba(255,255,255,1);
        padding: 10px 6px 10px 12px;
        font-size: 24px;
    }
    .stamp .copy p{
        font-size: 13px;
        margin-top: 12px;
        margin-bottom: 16px;
    }
    .stamp .copy a{
        background-color: #fff;
        color: #333;
        font-size: 14px;
        text-decoration: none;
        text-align: center;
        padding: 5px 10px;
        border-radius: 4px;
        display: block;
    }
    /*风格*/
    /*鹅黄*/
    .stamp_yellow{
        background: #F39B00;
        background: radial-gradient(rgba(0,0,0,0) 0,rgba(0,0,0,0) 5px,#F39B00 5px);
        background-size: 15px 15px;
        background-position: 9px 3px;
    }
    .stamp_yellow:before{background-color: #f3c120
    }
</style>
<head>
    <meta charset="UTF-8">
    <title>Lottery</title>
</head>
<body>
    <div class="stamp stamp_yellow">
        <div class="par">
            <p>上品折扣店</p>
            <sub class="sign">$</sub><span>50.00</span><sub>优惠券</sub>
            <p>订单满 100.00 元</p>
        </div>
        <div class="copy">副券
            <p>2019-02-17<br>
                2019-02-23</p>
            <a href="#">立即使用</a>
        </div>
        <i></i>
    </div>
</body>
</html>

结果还是不错的，以假乱真哈哈
在这里插入图片描述
Hexo链接：https://woaixiaoyuyu.github.io/2019/02/14/CSS3开坑-不定期更新/

xiaoyuyulala

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3开坑_不定期更新

title: CSS3开坑_不定期更新date: 2019-02-14 20:01:42tags: csstoc: true自己之前稍微开了一下html5的坑，换一个心情，记录一下自己从0学CSS3遇到的一些知识点主要的学习资料就还是HTML5+CSS3从入门到精通以及一些网上的资料选择器介绍其实一开始我都没听说过这名词，后来发现就是指# .classname这些定义CSS的...
复制链接

扫一扫

专栏目录