基础选择器（标签，类，id，通配符）和复合选择器（后代，子代，复合，链接伪类，focus）

emmet语法
div*3,div+p,div,.demo*5,

a:visited        表示已经访问过的
a:link            未访问的链接
a:hover            鼠标放上去的
a:active            点下后未放开
顺序满足 link visit hover active

转换为块元素：display:block;
转换为行内元素：display:inline;
转换为行内块：display: inline-block;

引入方式

内联样式，<p style="color: red;margin-left: 20px">this is test</p>

import引入样式 
<style type="text/css">
    @import url(my.css);
</style>

背景

            background-color: red;背景颜色
            background-position: center;    位置，居中 buttom center ，top center
            background-size: contain;设置大小
            background-repeat: no-repeat;背景图片是否重复
            repeat-x        repeat-y
            background-origin: padding-box;
            background-clip: border-box;
            background-image:url('https://s4.ax1x.com/2022/01/20/7cSmO1.png');背景图片
            background-attachment: fixed;固定，不随内容更改而改动scroll

标准盒子

由四部分：margin，border，padding，content
外边距，边框，内边距，内容

定位（通常是结合社会工程学获取对方的地理位置）

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
    if (navigator.geolocation)
    {
        navigator.geolocation.getCurrentPosition(showPosition);
    }
    else
    {
        x.innerHTML="该浏览器不支持获取地理位置。";
    }
}

function showPosition(position)
{
    x.innerHTML="纬度: " + position.coords.latitude + 
    "<br>经度: " + position.coords.longitude;    
}
</script>
</body>
</html>

input除了传统的text，password，radio，checkbox，button，submit等，还有如下

color，date，datetime，datetime-local，email，month，number，range，search，tel，time，url，week

小米侧边栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    a {
        display: block;
        width: 230px;
        height: 40px;
        background-color: #55585a;
        font-size: 14px;
        color: #fff;
        text-decoration: none;
        text-indent: 2em;

    }
    a:hover {
        background-color: #ff6700;
    }
</style>
<body>
<a href="#">手机 电话卡</a>
<a href="#">电视 盒子</a>
<a href="#">笔记本 平板</a>
<a href="#">出行 穿戴</a>
<a href="#">智能 路由器</a>
<a href="#">健康 儿童</a>
<a href="#">耳机 影响==音响</a>

</body>
</html>

当行文字居中

只要让文件的高度等于等于盒子的高度

a {
  height: 40px;
  line-height: 40px;
}

背景颜色

background-color: red;

背景颜色改为红色
a {
  background-color: red;
}
background-color: transparent;表示透明

页面布局要学习三大核心, 盒子模型, 浮动和定位. 学习好盒子模型能非常好的帮助我们布局页面

所谓盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和实际内容

css基础

小米侧边栏

当行文字居中

背景颜色

results matching ""

No results matching ""