欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

Web前端——css

程序员文章站 2022-03-22 12:29:33
css 推荐的样式编写顺序： 1. Positioning：定位 2. Box model：盒子模型、大小等 3. Typographic：文字系列、排印等 4. Visual：可视化、背景等 5. Misc：其它混杂模式 居中 垂直居中，设置line height 水平方向 text align ......

css

推荐的样式编写顺序：

  1. positioning：定位
  2. box model：盒子模型、大小等
  3. typographic：文字系列、排印等
  4. visual：可视化、背景等
  5. misc：其它混杂模式

居中

垂直居中，设置line-height
水平方向 text-align

flex 弹性盒子

其实就是一个百分比布局，使用这个的时候，子元素的宽高会受限制于弹性盒子

<!doctype html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
.flex-container {
    display: -webkit-flex;/*谷歌浏览器内核*/
    display: flex;
    width: 500px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 350px;/*这里其实是无效的，具体的宽度得看父布局，子控件将平分父布局的宽度平分*/
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>

</body>
</html>

设置背景为图片的一部分

background-image:url() -140px 0px;

计算机中，左上角为原点，x正方向是右，y轴正方向是下
图片偏移设置背景 -140 以html底部作为参考物，图片自身向左移动，所以是负的

鼠标滑过更改样式

:hover也是属于css选择器中的一种，鼠标悬浮在元素上，元素的样式，可以使用这个来达到鼠标滑动改变样式的效果

“>” 代表着是只选择子代元素，而空格则代表选中后代元素

  • a:link {color: #ff0000} /* 未访问的链接 */
  • a:visited {color: #00ff00} /* 已访问的链接 */
  • a:hover {color: #ff00ff} /* 鼠标移动到链接上 */
  • a:active {color: #0000ff} /* 选定的链接 */
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.nav ul{
    display: flex;
    flex-direction: row; /* 盒子内元素的排列方向 */
    padding-left: 100px;
    list-style: none;
}
<!-- “>” 代表着是只选择子代元素，而空格则代表选中后代元素 -->
.nav ul > li:hover{
    border-left: 1px solid #f27b04;
    border-top: 1px solid #f27b04;
    border-right: 1px solid #f27b04;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    cursor: pointer;
}
</style>
</head>

<body>
<div class="nav">
        <ul>
            <li>首页</li>
            <li>女人</li>
            <li>箱包</li>
            <li>美容</li>
            <li>男人</li>
            <li>运动</li>
            <li>数码</li>
            <li>热销榜</li>
            <li>婚庆</li>
            <li>户外</li>
            <li>美食</li>
        </ul>
        
    </div>
</body>
</html>

float 浮动与clear

使用此样式的元素需要设置宽度，否则，它们会尽可能地窄。

使用float浮动，会影响到其他的元素，所以使用clear属性

clear可以both，left，right

both两边都不能出现浮动元素，left是左边不能出现浮动元素，right是右边不能出现浮动元素

下面的效果链接中的.text_line如果没有clear属性，文字就会挤在尾部，宽度不够大的话，文字还会变成竖排

例子1：竖排三个div

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>ff</title>
    </head>
    <body>
    <style type="text/css">
        .left_body{
            width: 200px;
            height: 200px;
        }
    </style>
        <div id="con">
            <div class="left_body" style="background: red;"></div>
            <div class="left_body" style="background: beige;"></div>
            <div class="left_body" style="background: #008000;"></div>
        </div>
    </body>
</html>

Web前端——css

例子2：使用float，水平排列div

如果宽度不够的话，会自动换行

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>ff</title>
    </head>
    <body>
        <style type="text/css">
            .left_body{
                width: 200px;
                height: 200px;
                float: left;
            }
            
        </style>
        <div id="con">
            <div class="left_body" style="background: red;"></div>
            <div class="left_body" style="background: beige;"></div>
            <div class="left_body" style="background: #008000;"></div>
            
        </div>
    </body>
</html>

Web前端——css

Web前端——css

例子3:外层div包含浮动元素（使用clear)

修改外层div的位置，浮动元素的位置也会随之改变

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>ff</title>
    </head>
    <body>
        <style type="text/css">
            .left_body{
                width: 200px;
                height: 200px;
                float: left;
            }
            #con{
                border: 1px  solid #0000ff;
            }
            .clearfix{
                clear: both;
            }
        </style>
        <div id="con">
            <div class="left_body" style="background: red;"></div>
            <!-- 如果在这里加一个下面的注释的div，可以达到换行的效果 -->
            <!--<div class="clearfix"></div>  -->
            <div class="left_body" style="background: beige;"></div>
            <div class="left_body" style="background: #008000;"></div>
            <div class="clearfix"></div>
        </div>
    </body>
</html>

Web前端——css

例子4：外层div包含浮动元素（外层div也设置为float)

修改外层div的位置，浮动元素的位置也会随之改变

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>ff</title>
    </head>
    <body>
        <style type="text/css">
            .left_body{
                width: 200px;
                height: 200px;
                float: left;
            }
            #con{
                border: 1px  solid #0000ff;
                float:left;
            }
            
        </style>
        <div id="con">
            <div class="left_body" style="background: red;"></div>
            <div class="left_body" style="background: beige;"></div>
            <div class="left_body" style="background: #008000;"></div>
        </div>
    </body>
</html>

Web前端——css

上一篇： 如何成为一名优秀的web前端工程师

下一篇： 博客园美化主题需要这几步

推荐阅读