day05-网页布局设计

最新推荐文章于 2024-07-23 11:30:08 发布

weixin_44795592

最新推荐文章于 2024-07-23 11:30:08 发布

阅读量203

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_44795592/article/details/126960787

版权

day05-网页文本

一、IE盒模型（怪异盒模型）

<style>
        .header{
            width: 100%;
            height: 100px;
            border: 1px solid red;
        }
        .header .logo{
            /* 要求，括号前面必须是空格 */
            width: calc( 30% - 10px );
            height: 100px;
            background-color: gainsboro;
            float: left;
            padding-left: 10px;
        }
        .header .login{
            width: 70%;
            height: 100px;
            background-color: antiquewhite;
            float: left;
            padding-left: 20px;
            border: 6px solid orange;
            /* content-box:标准盒子 
                border-box:IE盒子
            */
            box-sizing: border-box;
        }
        .header .logo .pic{
            width: 100px;
            height: 60px;
            background-color: pink;
        }   
    </style>
</head>
<body>
    <div class="header">
        <div class="logo">
            <div class="pic"></div>
        </div>
        <div class="login">
            <span>123</span>
        </div>
    </div>

W3C将两种都作为现代浏览器标准，但是使用的时候需要用代码切换
box-sizing:content-box\border-box
content- box:代表标准盒子
border-box:代表怪异盒子在移动端更加明显

二、选择器扩展

ID选择器

<div id="app"></div>
#app{
	css
}

ID是唯一-值，代表这个元素唯一性,页面上不要出现两个- -样ID
ID选择器，id的名字不能以数字开头。id="123"错误
合法的id名字

app\app1

ID选择器在布局的过程中使用相对来说要少-些。
ID可以配合脚本来使用。通过脚本来找到唯一的某个标签

名字采用驼峰命名法： surePassword

类选择器：class

语法

<div class="content"></div>
<div class="item content"></div>

.content{

}
.item{

}
//要求class里面同时存在两个名字
.item.content{

}

类名可以重复
类名可以设置多个
一般写的过程如果涉及到公共样式，一般类来声明

标签选择器（元素选择器）

<span></span>
<div>
</div>

语法

.container span{

}

使用过程中寻找指定的内容，根据指定范围来找

后代选择器

    <style>
        /* 这个选择器称为后代选择器 */
        .box span{
            color: red;
        }
    </style>
    <div class="box">
        <span>345</span>
        <div>
            <span>123</span>
        </div>
    </div>
	<span>455</span>

子元素选择器 >

找元素下面的子元素

    <style>
        /* 这个选择器称为后代选择器 */
        .box > span{
            color: red;
        }
    </style>
<body>
    <div class="box">
        <span>345</span>
        <div>
            <span>123</span>
        </div>
    </div>
    <span>455</span>
</body>

属性选择器

属性可以自定义

        div[name="app"]{
            color: blue;
        }
        div[style]{
            color:green
        }

 <span name="username">455</span>
    <div name="app">div</div>
    <div name="app1">div</div>
    <div style="">div3</div>

伪类选择器

 <style>
        /* 这个选择器称为后代选择器 */
        .box > span{
            color: red;
        }
        div[name="app"]{
            color: blue;
        }
        div[style]{
            color:green
        }
        .box > span[name]{
        }
        /* 在没有点击a标签默认样式 */
        a:link{
            color:aqua
        }
        /* a标签点击过后样式 */
        a:visited{
            color: gainsboro;
        }
        a:hover{
            color:tomato
        }
        a:active{
            color:yellow
        }
        .wrapper{
            width: 100px;
            height: 100px;
            background-color: antiquewhite;
        }
        .wrapper:hover{
            width: 200px;
        }
        .wrapper:hover span{
            display: none;
        }
    </style>

<body>
    <div class="box">
        <span>345</span>
        <div>
            <span name="sp">123</span>
        </div>
    </div>
    <span name="username">455</span>
    <div name="app">div</div>
    <div name="app1">div</div>
    <div style="">div3</div>
    <a href="http://www.woniuxy.com">蜗牛学院地址</a>
    <div class="wrapper">
        <span>蜗牛</span>
    </div>
</body>

a:link代表超链接在没有点击之前的样式
a:visited超链接点击过后的样式
a:hover代表超链接鼠标移入样式 实现交互效果：二级菜单
a:active鼠标点击瞬间样式

顺序不能变

伪元素选择器

after:给指定元素内部最后面加内容

brefore:给指定元素内部最前面加内容

.clearfix::after{
    content:"";
    display:block;
    clear:both
}

以前语法是必须用：：表示伪元素，现在可以用：来表示

一般为了区分：采用两个冒号表示伪类::

三、文本样式

文本显示颜色

color:这个属性就是用于文本颜色

文本水平方向位置

text-align:left. right. center
这个属性一般用于盒子，控制这个盒子里文本，再这个盒子中位置

文本垂直方向位置

文本默认的高度由字体来决定，字体越大，文本所占的空间越大

文本不支持height来设置样式

文本可以支持line-height来设置行高。

line-height值和父元素容器高度一样，文本垂直居中显示。

文本的下划线

    /* a标签去掉下划线 */
    text-decoration: none;

none:去掉下划线

underline：添加下划线

line-through：中划线

大小写转换

    /* 字母大小写 */
    /* text-transform:uppercase; */

capitalize：全大写

lowercase：小写

uppercase：首字母大写

单词间距

  /* 单词间距 */
  word-spacing: 10px;
  /* 字母间距 */
  letter-spacing: 10px;

四、css背景样式

我们可以在页面上通过CSS来设置背景

背景颜色、背景图片、背景图片的平铺、重复、位置等等

页面图片使用过程有两种情况

img标签来设置我们图片显示
给一个盒子铺背景图片，内容就可以在图片上显示

动态渲染的内容，都是img来实现

静态的部分一般都是用背景图片的来实现

背景颜色：

background-color：

背景图片

background-image:url(“路径”)

背景平铺

background-repeat:no-repeat\repeat-x\repeat-y

这个属性可以英语1px宽的背景，在指定方向平铺。图片越小，网页加载越快

背景位置（非常重要）

background-position: 100px 50px;

left、right、bottom、top来决定位置

也自己设置位置尺寸

设置背景图片大小：

background-size：

contain:图片会放大或者缩小，当一变铺满了这个屏幕。另外一边留白

cover：等比列放大图片，直到盒子被铺满才停下来

你也可以手动设置图片尺寸

背景固定（了解）

background-attachment：fixed

一个盒子内部内容在滚动，这个图片会一直固定在盒子指定位置，不会移动

复合属性：简写，将样式多个值写在一起就实现效果

background: pink url("images/ewm.png") no-repeat center center;background-size: cover;

伍、雪碧图技术

雪碧图技术，精灵图技术

前端有很多的小图片需要用来显示和渲染。

如果这些小图片单个的加载，每个图片都要从服务器访问一次

提出了精灵图，将很多小图标放在一个大图里面。我们只需要访问服务器一次，拿到这个图片

剩下的通过前端代码来显示图片（前端代码解析效率很高）。

.box4{
            width:35px;
            height: 35px;
            border: 1px solid;
            background: url("./img/un_login_third.png");
            /* background-position: -35px -35px; */
        }
        .box4:hover{
            background-position: 0px -35px;
        }