前端-01-web基础

作者: 西海岸虎皮猫大人 | 来源:发表于2020-04-29 22:10 被阅读0次

前端-索引
前端-01-web基础
day21-HTML
前端基础进阶系列
前端入门系列
二、flask开发基础与入门
【350页】前端校招面试题及解析大全
web前端入门基础
HTML基础学习笔记
学习Vue框架之前，要有JavaScript的知识储备

1 常用标签

1.1 h1-h6

是块级元素独占一行,行内元素同行显示,p标签也是块级元素

1.2 右对齐

只对块级元素有效

<h1 align="right">一级标题</h1>

1.3 webstorm生成一些文字

lorem + tab

1.4 img是行内元素

1.5 所有有内容的元素都有title属性

1.6 a标签

target _selt 原窗口打开 _blank 新窗口打开
锚点 href="#myname" 跳转到name为myname的a元素 div用id

1.7 文本格式标签

全是行内元素,都可以用css实现
加粗 倾斜 下划线,h5已淘汰 强调,加粗 强调,倾斜
sup上标 sub下标
<s>删除线 <del>删除线
小号字体 <big>大号字体
<ins>插入内容,下划线

1.8 语义化标签

h1-h5标题 address地址
pre标签内可以识别空格和换行

1.9 实体字符

空格 < 左尖括号 > 右尖括号

1.10 列表

ul无序列表
li是块级元素
快捷键 ul嵌套li包含a标签 ul>li*3>a tab
type属性修改项目符号 circle空心圆 square正方形 none无符号默认desc实心圆
ol有序列表 type="I" 罗马数字 start="8"从第8个开始 reversed倒序
自定义列表
dl外层 dt主题 dd描述 dt dd同级

1.11 表格

快捷键 table>tr3>td3
cellspacing="0" 边框双线合并
cellpadding 内容距边框距离
tr valign 垂直对齐方式 align水平对齐方式
colspan水平合并 rowspan垂直合并
caption标签表格标题

1.12 内联框架

iframe scrolling默认auto none不显示滚动条
frameborder 是否显示边框

1.13 表单

get提交数据限制为2kb
取消按钮

<input type="reset" value="重置" />

下拉列表分组

<select name="city">
    <optgroup label="北京">
        <option value="hd">海淀</option>
        <option value="cy">朝阳</option>
        <option value="cp">昌平</option>
    </optgroup>
    <optgroup label="河北">
        <option value="xt">邢台</option>
        <option value="sjz">石家庄</option>
        <option value="bd">保定</option>
    </optgroup>
</select>

多行文本框

<textarea name="myself" cols="30" rows="10">
</textarea>

label标签
点击时选中按钮

性别:
<label for="man">男</label><input type="radio" name="sex" id="man"/>
<label for="woman">女</label><input type="radio" name="sex" id="woman"/>

fieldset对input进行分组
单选按钮和多选按钮默认选中checked
下拉列表默认选中selected
disabled禁用 readonly只读

1.14 H5新增input类型

    <!--非法格式提交时会报错-->
    邮箱: <input type="email"/>
    搜索: <input type="search"/>
    滑块: <input type="range" min="0" max="100" value="20" step="10"/>
    数字: <input type="number" min="0" max="100" step="10"/>
    网址: <input type="url"/>
    颜色: <input type="color"/>
    电话: <input type="tel"/>
    日期: <input type="date"/>
    月:   <input type="month"/>
    周:   <input type="week"/>

1.15 H5新增属性

placeholder 输入框提示
required 必填项
邮箱\网址 multiple 多个用,隔开
autofocus 自动获取焦点
minlength\maxlength 限制字符数

1.16 H5新增标签

header 头部
nav 导航
article 文章
section 章节
aside 侧边栏
figure
details
summary
mark 标记
meter 刻度 value min max high low
progress 进度条
video 视频 src路径 autoplay自动播放 controls显示面板 loop循环 poster海报 muted静音 preload预缓存
audio 音频 src路径属性类似video
embed 可以引入视频或音频
datalist标签

    <input type="text" list="city">
    <datalist id="city">
        <option value="北京">beijing</option>
        <option value="河北">hebei</option>
        <option value="河南">henan</option>
    </datalist>

2 CSS-基础样式\选择器

2.1 实现内容与表现的分离,提高重用性和可维护性

2.2 @import与link的区别

@import是先加载html,link是同时加载
@import有兼容性问题
link还可以引入其他内容,如图标等
不建议@import,会增多http请求

2.3 选择器

全局选择器
元素选择器
类选择器
ID选择器
合并选择器 ,连接,提取共同样式
优先级相同时,后面的代码生效

2.4 行内元素与块级元素区别

块级元素独占一行宽100%,行内元素由内容撑开
块级元素可以设置宽高,行内元素不能设置宽高

2.5 黑白瀑布流练习

效果图:

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 25%;
            float: left;
        }
        img {
            width: 100%;
            /*浮动去白条*/
            float: left;
        }
    </style>
</head>
<body>
<div class="box">
    <img src="images/img_1.jpg" alt="">
    <img src="images/img_8.jpg" alt="">
    <img src="images/img_12.jpg" alt="">
    <img src="images/img_15.jpg" alt="">
    <img src="images/img_4.jpg" alt="">
    <img src="images/img_7.jpg" alt="">
    <img src="images/img_12.jpg" alt="">
    <img src="images/img_15.jpg" alt="">
</div>
<div class="box">
    <img src="images/img_2.jpg" alt=""/>
    <img src="images/img_5.jpg" alt=""/>
    <img src="images/img_10.jpg" alt=""/>
    <img src="images/img_3.jpg" alt=""/>
    <img src="images/img_6.jpg" alt=""/>
    <img src="images/img_10.jpg" alt=""/>
</div>
<div class="box">
    <img src="images/img_3.jpg" alt=""/>
    <img src="images/img_7.jpg" alt=""/>
    <img src="images/img_11.jpg" alt=""/>
    <img src="images/img_13.jpg" alt=""/>
    <img src="images/img_2.jpg" alt=""/>
    <img src="images/img_5.jpg" alt=""/>
    <img src="images/img_9.jpg" alt=""/>
    <img src="images/img_14.jpg" alt=""/>
</div>
<div class="box">
    <img src="images/img_4.jpg" alt=""/>
    <img src="images/img_6.jpg" alt=""/>
    <img src="images/img_9.jpg" alt=""/>
    <img src="images/img_14.jpg" alt=""/>
    <img src="images/img_1.jpg" alt=""/>
    <img src="images/img_8.jpg" alt=""/>
    <img src="images/img_11.jpg" alt=""/>
    <img src="images/img_13.jpg" alt=""/>
</div>
</body>
</html>

2.6 背景属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            /*背景颜色*/
            /*background-color: red;*/
            /*background-color: #ff0000;*/
            /*background-color: rgb(255,0,0);*/
            /*background-color: rgba(255,0,0,0);*/
            /*默认水平垂直平铺,优先级高于背景色*/
            background-image: url("images/pic2.jpeg");
            /*背景图片平铺 no-repeat不平铺 repeat-x水平平铺 repeat-y垂直平铺*/
            background-repeat: no-repeat;
            /*背景图片大小 只写一个具体值时等比例缩放*/
            /*background-size: 1000px;*/
            background-size: 100% 100%;
            height: 1000px;
            /*背景图片固定*/
            background-attachment: fixed;
        }
        .box {
            width: 800px;
            height: 600px;
            /*background-color: pink;*/
            background-color: rgba(0,0,0,.8);
            background-image: url("images/pic1.jpg");
            background-repeat: no-repeat;
            /*cover图片覆盖div contain宽或高拉至最大*/
            background-size: contain;
            /*背景图片定位 只有水平值 垂直默认居中 关键字可取top center bottom left right*/
            background-position: 30px;
            /*背景属性简写 颜色 背景图片 是否平铺, 大小\定位\是否固定单独写*/
            /*background: rgba(0,0,0,.8) url("images/pic1.jpg") no-repeat;*/
        }
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>

2.7 字体属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            /*字体颜色*/
            color: red;
            /*字体加粗 默认值是normal 可以取数字100-700 加粗700 正常400*/
            font-weight: bold;
            /*700与加粗效果一致*/
            /*font-weight: 700;*/
            /*字体类型 italic倾斜*/
            font-style: italic;
            /*字体大小 浏览器最小是10px 导航栏小字一般为12px*/
            font-size: 18px;
            /*字体 微软雅黑 黑体 宋体 幼圆等 如浏览器不支持可用,分割多个字体 两个或多个英文单词需要加引号*/
            font-family: 楷体;
        }
        h1 {
            /*一号字体不加粗*/
            font-weight: normal;
        }
    </style>
</head>
<body>
<div class="box">等级分发士大夫类</div>
<h1>一号标题</h1>
</body>
</html>

2.8 text属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            /*内容水平对齐方式 包括img*/
            text-align: center;
            /*下划线 underline加下划线 常用于给a去下划线*/
            text-decoration: none;
        }
        a {
            /*删除线*/
            text-decoration: line-through;
            /*上线*/
            /*text-decoration: overline;*/
        }
        p {
            /*uppercase大写 lowercase小写 capitalize每个单词首字母大写*/
            text-transform: capitalize;
        }
        .two {
            /*如果20px一个字 则缩进两个字*/
            text-indent: 40px;
        }
    </style>
</head>
<body>
<div class="box">
    是垃圾但是分厘卡机的
    <img src="images/pic1.jpg" alt="">
    <a href="#">这是一个链接</a>
    <p>
        alsdfja dsflj
    </p>
</div>
<div class="two">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem debitis illo porro quam temporibus velit voluptatibus? Culpa dolorem doloribus hic laborum numquam officiis perspiciatis quaerat repellat, saepe similique temporibus totam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem debitis illo porro quam temporibus velit voluptatibus? Culpa dolorem doloribus hic laborum numquam officiis perspiciatis quaerat repellat, saepe similique temporibus totam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem debitis illo porro quam temporibus velit voluptatibus? Culpa dolorem doloribus hic laborum numquam officiis perspiciatis quaerat repellat, saepe similique temporibus totam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem debitis illo porro quam temporibus velit voluptatibus? Culpa dolorem doloribus hic laborum numquam officiis perspiciatis quaerat repellat, saepe similique temporibus totam?
</div>
</body>
</html>

2.9 列表属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul {
            /*去项目符号*/
            /*list-style-type: none;*/
            /*图片作为项目符号 网页中一般用字体图标*/
            /*list-style-image: url("images/pic3.jpg");*/
            /*项目符号位置 outside在li外*/
            /*list-style-position: outside;*/
            /*简写*/
            list-style: none
        }
    </style>
</head>
<body>
<ul>
    <li><a href="#">无序列表</a></li>
    <li><a href="#">无序列表</a></li>
    <li><a href="#">无序列表</a></li>
    <li><a href="#">无序列表</a></li>
    <li><a href="#">无序列表</a></li>
</ul>
</body>
</html>

2.10 css其他属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one {
            width: 500px;
            height: 200px;
            background-color: pink;
            /*行高 等于容器高一行文字垂直居中*/
            line-height: 200px;
            /*font-size: 20px;*/
            /*取数字时用数字乘字体大小*/
            /*line-height: 10;*/
            /*字符间距*/
            letter-spacing: 2px;
            /*透明度 .5半透明 字体 背景都半透明 单个透明用rgba*/
            opacity: .5;
        }
    </style>
</head>
<body>
<div class="one">
    放假啦九点十六分捡垃圾
</div>
</body>
</html>

2.11 overflow属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 300px;
            height: 100px;
            background-color: aquamarine;
            /*内容溢出部分隐藏 auto自动,溢出出现滚动条 scroll不论溢出都有滚动条*/
            overflow: hidden;
        }
    </style>
</head>
<body>
<div class="box">
    奥地利放假啊了解对方垃圾堆了房间啊了解法律手段放假啦将受到法律奥地利放假啊了解对方垃圾堆了房间啊了解法律手段放假啦将受到法律奥地利放假啊了解对方垃圾堆了房间啊了解法律手段放假啦将受到法律奥地利放假啊了解对方垃圾堆了房间啊了解法律手段放假啦将受到法律
</div>
</body>
</html>

2.12 多余文本省略号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 300px;
            background-color: pink;
            /*文本换行 nowrap不换行*/
            white-space: nowrap;
            /*溢出部分隐藏*/
            overflow: hidden;
            /*溢出部分省略号*/
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
<div class="box">
    分厘卡锻炼腹肌安静的房间案件多发辣椒水分厘卡锻炼腹肌安静的房间案件多发辣椒水    分厘卡锻炼腹肌安静的房间案件多发辣椒水分厘卡锻炼腹肌安静的房间案件多发辣椒水
</div>
</body>
</html>

2.13 关系选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box span {
            /*空格 后代选择器*/
            font-size: 30px;
        }
        .box>span {
            /*> 子代选择器*/
            color: red
        }
        .two+div {
            /*+相邻兄弟选择器*/
            color: green;
        }
        .two~div {
            /*~通用兄弟选择器,后边所有兄弟*/
            font-size: 40px;
        }
    </style>
</head>
<body>
<div class="box">
    <span>子span</span>
    <div>
        子div
        <span>孙span</span>
    </div>
</div>
<div>1</div>
<div class="two">2</div>
<div>3</div>
<div>4</div>
</body>
</html>

2.14 伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            font-size: 24px;
        }
        a {
            font-size: 24px;
        }
        .box:hover{
            /*鼠标悬停效果*/
            /*color: red;*/
            /*background-color: yellow;*/
            /*height: 200px;*/
        }
        .box:active{
            /*鼠标按下时*/
            color: purple;
        }
        a:hover{
            color: purple;
        }
        a:link{
            /*点击前 只对a有效*/
            color: pink;
        }
        a:visited{
            /*点击后 只对a有效*/
            color: red;
        }
    </style>
</head>
<body>
<div class="box">
    div元素
    <a href="#">超链接元素</a>
</div>
</body>
</html>

2.15 css3新增伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul>li:first-child{
            /*第一个元素*/
            color: red;
        }
        ul li:last-child{
            /*最后一个子元素*/
            color: pink;
        }
        ul>li:nth-child(2){
            /*选中第几个子元素*/
            font-size: 20px;
        }
        ul>li:nth-child(odd){
            /*奇数个 even偶数个 3n 3的倍数*/
            color: purple;
        }
    </style>
</head>
<body>
<ul>
    <li>奥斯陆冬季发掘的法律</li>
    <li>奥斯陆冬季发掘的法律</li>
    <li>奥斯陆冬季发掘的法律</li>
    <li>奥斯陆冬季发掘的法律</li>
    <li>奥斯陆冬季发掘的法律</li>
    <li>奥斯陆冬季发掘的法律</li>
</ul>
</body>
</html>

3 CSS-盒模型 | 新增选择器

3.1 标准盒模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a {
            /*行内元素如a设置宽高不生效,浮动后所有行内元素变为块级元素*/
            float: left;
            width: 500px;
            height: 300px;
        }
        .box {
            width: 300px;
            height: 300px;
            background-color: pink;
            /*边框样式 solid实线 dashed虚线 dotted点线 double双线 双线最小值为3px*/
            border-style: double;
            /*边框颜色需要配合边框样式*/
            border-color: black;
            /*边框粗细*/
            border-width: 1px;
            /*简写 顺序不分前后*/
            /*border: solid black 1px;*/
            /*上边框 bottom下 left左 right右*/
            border-top: 3px double blue;
            /*下边框颜色*/
            border-bottom-color: green;

            /*外边距 取1个值代表四周距离 可以取负值*/
            /*margin: 10px;*/
            /*两个值上下 左右*/
            /*margin: 10px 20px;*/
            /*三个值 上 左右 下*/
            /*上边距*/
            /*margin-top: 5px;*/
            /*盒子水平居中*/
            /*margin: 0 auto;*/
            /*margin-bottom: 100px;*/
            /*float: left;*/
        }
        .box1{
            width: 300px;
            height: 300px;
            background-color: pink;
            border: 5px;
            /*margin相撞时取二者最大值 上面的100px 浮动后不合并*/
            margin-top: 50px;
        }
        .parent{
            width: 500px;
            height: 500px;
            background-color: red;
            /*父元素加overflow解决子元素margin对父元素生效问题*/
            /*overflow: hidden;*/
            /*父元素加透明边框解决子元素margin对父元素生效问题*/
            /*border: 1px transparent;*/
            /*父元素或子元素加浮动解决子元素margin对父元素生效问题*/
            /*float: left;*/
            /*父元素加padding 1px解决子元素margin对父元素生效问题*/
            padding-top: 1px;
        }
        .child{
            width: 200px;
            height: 200px;
            background-color: green;
            /*对父元素也生效*/
            margin-top: 100px;
        }
    </style>
</head>
<body>
<a href="#">超链接</a>
<div class="box"></div>
<div class="box"></div>
<div class="box1"></div>
<div class="parent">
    <div class="child"></div>
</div>
</body>
</html>

3.2 padding

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            /*背景颜色可以到内边距 padding取值与margin类似 padding不可取负值*/
            width: 200px;
            height: 200px;
            background-color: red;
            /*内边距会撑大容器*/
            padding: 20px;
            /*ie盒模型 默认值content-box标准盒模型*/
            /*box-sizing: border-box;*/
        }
        /*ie盒模型 只在ie678生效 实际宽度width+margin 宽包含border和padding*/
    </style>
</head>
<body>
<div class="box">答案就是灯笼裤飞机</div>
</body>
</html>

3.3 金立布局

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>金立布局</title>
    <link rel="stylesheet" href="css/17style.css">
    <link rel="stylesheet" href="css/reset.css">
</head>
<body>
<div class="container">
    <div class="wrap">
        <div class="left"></div>
        <div class="right">
            <div class="one"></div>
            <div class="one"></div>
            <div class="one"></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>
</body>
</html>

reset.css

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, legend, input, textarea, button, p, blockquote, th, td{margin: 0;padding: 0;}
body {padding:0;margin:0;text-align:center;color:#333;font-size:14px;font-family:"宋体", arial;}
li{list-style-type:none;}
a{text-decoration: none;}
img,input,button{border:none;vertical-align:middle;}

17style.css

.container{
    width: 100%;
    background-color: #e5e5e5;
}
.wrap{
    width: 1196px;
    margin: 0 auto;
}
.left{
    width: 305px;
    height: 785px;
    background-color: red;
    float: left;
}
.right{
    width: 891px;
    height: 785px;
    float: left;
}
.right>div{
    width: 290px;
    height: 390px;
    background-color: red;
    float: left;
    margin-left: 7px;
}
.right>.one{
    margin-bottom: 5px;
}

3.4 css3新增伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style>
        /*选中空的子元素*/
        .box>div:empty{
            height: 100px;
            background-color: yellow;
        }
        /*否定 除了第4个*/
        .box>div:not(.four){
            color: red;
        }
        /*input获取焦点时*/
        /*input:focus{*/
            /*width: 300px;*/
            /*height: 50px;*/
        /*}*/
        /*被选中时*/
        input:checked{
            width: 20px;
            height: 20px;
        }
    </style>
</head>
<body>
<div class="box">
    <div>1</div>
    <div>2</div>
    <div></div>
    <div class="four">4</div>
    <div>5</div>
</div>
姓名:<input type="text">
男<input type="radio" name="sex" value="man">
女<input type="radio" name="sex" value="woman">
</body>
</html>

3.5 伪对象选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪对象选择器</title>
    <style>
        /*之前插入内容 之后after*/
        .box:before{
            /*content: "之前";*/
            content: url("images/pic1.jpg")
        }
    </style>
</head>
<body>
<div class="box">盒子</div>
</body>
</html>

3.6 属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*属性选择器*/
        input[type=text]{
            width: 300px;
        }
        /*以p开头*/
        input[type^=p]{
        }
        /*以t结尾*/
        input[type$=p]{
        }
        /*包含*/
        input[type*=p]{
        }
        /*多个class包含box1*/
        div[class~="box1"]{
        }
        /*以dfun开头且以-连接*/
        div[class|='dfun']
    </style>
</head>
<body>
<form action="">
    <input type="text">
    <input type="password">
    <input type="email">
    <input type="checkbox">
    <input type="submit" value="提交">
</form>
</body>
</html>

4 CSS-浮动与定位

4.1 浮动

浮动后排除到文档流以外,在网页中不占据位置
浮动碰到父元素边框或者浮动元素边框后停止
浮动后转换为块级元素
没有上下浮动

常用5种清除浮动的方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            /*1.父元素清楚浮动影响*/
            /*overflow: hidden;*/
        }
        .one {
            width: 200px;
            height: 200px;
            background-color: red;
            /*float: right;*/
            /*浮动放不下会自动换行*/
            float: left;
        }
        .two {
            width: 300px;
            height: 300px;
            background-color: blue;
            /*float: right;*/
            float: left;
        }
        .three {
            width: 400px;
            height: 400px;
            background-color: green;
            /*float: right;*/
            float: left;
        }
        .footer{
            width: 100%;
            height: 100px;
            background-color: yellow;
            /*2.清除浮动影响*/
            /*clear: both;*/
        }
        .clear{
            /*3.浮动元素后加空div*/
            /*clear: both;*/
        }
        /*4.父元素设置高度*/
        /*5.父元素伪对象加div清除浮动*/
        .box:after{
            content: "";
            /*转换为块级*/
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="clear"></div>
</div>
<div class="footer"></div>
</body>
</html>

4.2 金立导航条练习

效果图

image.png

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>金立</title>
    <link rel="stylesheet" href="css/22style.css">
    <link rel="icon" href="images/favicon.ico">
    <link rel="stylesheet" href="css/reset.css">
</head>
<body>
<!--导航开始-->
<div class="nav">
    <div class="wrap">
        <div class="logo"><img src="images/logo.png" alt=""></div>
        <div class="r_nav">
            <div class="t_nav">
                <ul>
                    <li><a href="#">amigo账号登录</a><span>|</span></li>
                    <li><a href="#"> 原账号登录</a><span>|</span></li>
                    <li><a href="#">注册</a></li>
                    <li><a href="#">购物车</a></li>
                </ul>
            </div>
            <div class="b_nav">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">手机</a></li>
                    <li><a href="#">配件</a></li>
                    <li><a href="#">服务</a></li>
                    <li><a href="#">下载</a></li>
                    <li><a href="#">社区</a></li>
                    <li><a href="#">amigoOS</a></li>
                    <li class="search">
                        <form action="" method="post" name="myform">
                            <input type="text" name="" placeholder="输入搜索内容">
                            <button>镜</button>
                        </form>
                    </li>
                </ul>
            </div>

        </div>
    </div>
</div>
<!--导航结束-->
<!--轮播图开始-->
<div class="carousel">
</div>
<!--轮播图结束-->
</body>
</html>

css

.nav{
    width: 100%;
    height: 103px;
    background-color: #fff;
    border-bottom: 1px solid #d5d5d5;
}
.wrap{
    width: 1196px;
    /*块级元素水平居中*/
    margin: 0 auto;
}
.logo{
    width: 206px;
    height: 103px;
    float: left;
}
.logo>img{
    margin-top: 26.5px;
}
.r_nav{
    width: 990px;
    height: 103px;
    float: left;
}
.t_nav{
    width: 100%;
    height: 30px;
    line-height: 30px;
    color: #9f9f9f;
}
.b_nav{
    width: 100%;
    height: 73px;
    clear: both;
    line-height: 73px;
}
.r_nav ul{
    float: right;
}
.r_nav li{
    float: left;
}
.t_nav a{
    font-size: 12px;
    color: #9f9f9f;
    margin: 0 10px;
}
/*鼠标悬停变色*/
.r_nav a:hover{
    color: #ef4222;
}
/*第一个链接默认红色*/
.t_nav li:first-child>a{
    color: #ef4222;
}
.b_nav a{
    color: #000;
    font-size: 16px;
    margin: 0 29px;
}
.search{
    width: 165px;
    height: 28px;
    border: 1px solid #ddd;
    padding-left: 3px;
    margin-top: 21.5px;
}
.search input{
    width: 138px;
    height: 28px;
    float: left;
}
.search button{
    width: 25px;
    height: 28px;
    background-color: #ffffff;
    float: left;
}
.carousel{
    width: 100%;
    height: 640px;
    background: url("../images/04_1515047442501.jpg");
    background-position: -300px;
}

5 CSS-弹性盒模型

5.1 弹性盒模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            width: 100%;
            height: 500px;
            border: 1px;
            /*弹性盒 子元素默认水平显示*/
            display: flex;
            /*排列方向 column竖直排列*/
            /*flex-direction: column;*/
            /*主轴对齐方式 默认flex-start居左 flex-end居右 center居中 space-around左右有距离居中 space-between距离在中间平均分配*/
            /*justify-content: space-between;*/
            /*侧轴对齐方式 默认flex-start居上 flex-end居下 center居中*/
            /*align-items: center;*/
        }
        .container>div{
            /*width: 33.33%;*/
            /*width: 25%;*/
            /*height: 500px;*/
            height: 200px;
            flex-grow: 1;
        }
        .one{
            background-color: green;
            /*子元素宽度分配比例*/
            /*flex-grow: 1;*/
        }
        .two{
            background-color: pink;
            /*flex-grow: 2;*/
        }
        .three{
            background-color: red;
            /*flex-grow: 3;*/
        }
        .footer{
            width: 100%;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</div>
<div class="footer"></div>
</body>
</html>

5.2 水平垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            width: 500px;
            height: 500px;
            background-color: pink;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="box"></div>
</div>
</body>
</html>

5.3 百度周边练习

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/25style.css">
    <link rel="icon" href="images/百度周边_05.png">
    <link rel="stylesheet" href="css/reset.css">
</head>
<body>
<!--导航开始-->
<div class="nav">
    <div class="arrow"></div>
    <div class="title">
        <img src="images/百度周边_05.png" alt="">
        发现周边
    </div>
    <div class="search"></div>
</div>
<!--导航结束-->
<!--美食导航开始-->
<div class="food">
    <div>
        <img src="images/百度周边_14.png" alt="">
        <br>
        美食
    </div>
    <div>
        <img src="images/百度周边_14.png" alt="">
        <br>
        美食
    </div>
    <div>
        <img src="images/百度周边_14.png" alt="">
        <br>
        美食
    </div>
    <div>
        <img src="images/百度周边_14.png" alt="">
        <br>
        美食
    </div>
    <div>
        <img src="images/百度周边_14.png" alt="">
        <br>
        美食
    </div>
</div>
<!--美食导航结束-->
<!--菜单部分开始-->
<div class="menu">
    <div class="top">
        <div>
            <img src="images/百度周边_30.png" alt="">
            <br>
            美食
        </div>
        <div>
            <img src="images/百度周边_30.png" alt="">
            <br>
            美食
        </div>
        <div>
            <img src="images/百度周边_30.png" alt="">
            <br>
            美食
        </div>
        <div>
            <img src="images/百度周边_30.png" alt="">
            <br>
            美食
        </div>
        <div>
            <img src="images/百度周边_30.png" alt="">
            <br>
            美食
        </div>
    </div>
    <div class="bottom">
        <div>
            <img src="images/百度周边_30.png" alt="">
            <br>
            美食
        </div>
        <div>
            <img src="images/百度周边_30.png" alt="">
            <br>
            美食
        </div>
        <div>
            <img src="images/百度周边_30.png" alt="">
            <br>
            美食
        </div>
        <div>
            <img src="images/百度周边_30.png" alt="">
            <br>
            美食
        </div>
        <div>
            <img src="images/百度周边_30.png" alt="">
            <br>
            美食
        </div>
    </div>
</div>
<!--菜单部分结束-->
<!--为你优选开始-->
<div class="forU">
    <div class="wrap">
        <h2>为你优选</h2>
        <div class="img_box">
            <img src="images/百度周边_68.png" alt="">
            <img src="images/百度周边_68.png" alt="">
            <img src="images/百度周边_68.png" alt="">
        </div>
    </div>
</div>
<!--为你优选结束-->
</body>
</html>

css

body{
    background-color: #f2f4f5;
}
.nav{
    width: 100%;
    height: 75px;
    background-color: #ff4433;
    display: flex;
}
.arrow,.search{
    width: 75px;
    height: 75px;
    background: url("../images/百度周边_03.png") no-repeat center;
}
.search{
    background-image: url("../images/百度周边_08.png");
}
.title{
    flex-grow: 1;
    color: #fff;
    line-height: 75px;
    font-size: 18px;
}
.title>img{
    /*弹性盒vertical-align不生效*/
    /*vertical-align: middle;*/
    margin-top: -6px;
}
.food{
    width: 100%;
    background-color: #fff;
    display: flex;
    padding: 45px 0;
}
.food>div{
    flex-grow: 1;
}
.food img{
    width: 40%;
    /*图片最小宽度50px*/
    min-width: 50px;
    margin-bottom: 10px;
}
.menu{
    width: 100%;
    background-color: #fff;
    margin-top: 20px;
}
.menu>div{
    display: flex;
    padding: 30px 0;
}
.top>div,.bottom>div{
    flex-grow: 1;
    border-right: 1px solid #f2f4f5;
}
.top>div:last-child,.bottom>div:last-child{
    border-right: none;
}
.top{
    border-bottom: 1px solid #f2f4f5;
}
.menu img{
    margin-bottom: 5px;
}
.forU{
    width: 100%;
    background-color: #fff;
    margin-top: 20px;
    overflow: hidden;
    padding-bottom: 30px;
}
.wrap{
    width: 90%;
    margin: 0 auto;
}
.forU h2{
    text-align: left;
    font-weight: normal;
    line-height: 91px;
}
.img_box>img{
    float: left;
    width: 33.33%
}

6 CSS-display属性及应用

6.1 display

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display属性</title>
    <style>
        span{
            /*block转换为块级元素 inline行内元素 inline-block行内块 none隐藏,不占位置*/
            /*行内块 既在同一行又可设置宽高*/
            /*display: block;*/
            display: inline-block;
            width: 300px;
            height: 300px;
        }
        div{
            width: 300px;
            height: 300px;
            background-color: pink;
            /*display: none;*/
            /*隐藏后占据位置*/
            /*visibility: hidden;*/
            /*透明度取0也可以隐藏*/
            /*opacity: 0;*/
            /*div转换为td*/
            display: table-cell;
            /*转换为td后vertical-align生效*/
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div>法律实践的发家史独立开发</div>
<div>法律实践的发家史独立开发</div>
<span>行内元素</span>
<span>行内元素</span>
</body>
</html>

6.2 display hidden应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li{
            list-style-type: none;
            float: left;
            background-color: pink;
            padding: 20px 30px;
        }
        a{
            text-decoration: none;
            color: #333;
        }
        .hidden{
            width: 200px;
            height: 100px;
            display: none;
            background-color: red;
        }
        li:hover>.hidden{
           display: block;
        }
    </style>
</head>
<body>
<ul>
    <li>
        <a href="#">首页</a>
        <div class="hidden"></div>
    </li>
    <li><a href="#">首页</a></li>
    <li><a href="#">首页</a></li>
</ul>
</body>
</html>

7 过渡和动画

7.1 圆角和阴影

圆角 border-radius
阴影 box-shadow
字阴影 text-shadow

        .box {
            width: 300px;
            height: 100px;
            background-color: pink;
            /* 圆角 */
            /*border-radius: 20px;*/
            /* 左上右下20px */
            /*border-radius: 20px 40px;*/
            /* 右上左下30px */
            /*border-radius: 20px 30px 40px;*/
            /* 正方形50%可以画圆 */
            /*border-radius: 50%;*/
            /* 左右画圆取高的一半 */
            /*border-radius: 50px;*/
            /* 右下 水平10px 竖直10px 模糊度 扩展值 颜色 位置(默认外阴影)内阴影*/
            /*box-shadow: 5px 5px 10px 5px red inset;*/
            /* 金立官网阴影效果 */
            box-shadow: 0 15px 30px red;

            font-size: 30px;
            color: white;
            /* 字阴影 方向 模糊度 颜色*/
            text-shadow: 10px 10px 2px red;
        }
        /* 四周发光效果 */
        .box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 50%;
            margin: 100px;
            box-shadow: 0 0 30px gold;

        }

7.2 转换

旋转缩放移动倾斜

        .box {
            width: 234px;
            height: 300px;
            background-color: pink;
            margin: 50px;
        }
        .box:hover {
            /* 上移5px */
            /*transform: translate(0, -5px);*/
            /* 加阴影 */
            /*box-shadow:  0 15px 30px rgba(0,0,0,.2);*/
            /* 只有一个值右移10px */
            /*transform: translate(10px);*/
            /* 水平方向 */
            /*transform: translateX(30px);*/
            /* 顺时针旋转60度 */
            /* 旋转 位移可以写在一起 顺序不同效果不同*/
            /*transform: rotate(60deg);*/
            /* 旋转中心点左上 */
            /*transform-origin: left top;*/
            /* 缩放 x放大1.5 y缩小0.5 取一个值等比例缩放*/
            /*transform: scale(1.5, 0.5);*/
            /* 水平向左倾斜 */
            transform: skew(30deg);
            transform: skewX(30deg);
        }

7.3 过渡

/**
        1.可以过渡的属性: 颜色 取值为数值 阴影 转换 背景渐变
         */
        .box {
            width: 234px;
            height: 300px;
            background-color: red;
            margin: 50px;
            /* 多个属性空格隔开 */
            /*transition: transform 1s, box-shadow 1s,background-color 1s,*/
            /*border-radius 1s, border-bottom 1s, width 1s;*/
            /* 简写 */
            /* 速度 默认ease先加速后减速 ease-in加速 ease-out减速 ease-in-out先加后减  */
            /* 延迟2s */
            transition: all 1s ease-in 2s;
        }
        .box:hover {
            transform: translate(0, -5px);
            box-shadow: 0 15px 30px rgba(0,0,0,.5);
            background-color: pink;
            border-radius: 50%;
            border-bottom: 20px solid red;
            width: 300px
        }

遮罩和图片放大效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 合并选择器 */
        .box, .box>img, .hidden{
            width: 350px;
            height: 500px;
        }
        .box {
            position: relative;
            /* 溢出部分隐藏 */
            overflow: hidden;
        }
        .box img {
            transition: all 1s;
        }
        .box:hover img {
            /* 图片放大1.1倍 */
            transform: scale(1.1);
        }
        .hidden {
            background-color: rgba(0,0,0,.5);
            position: absolute;
            top: 0;
            left: 100%;
            transition: all 1s;
        }
        .box:hover .hidden {
            left: 0;
        }
    </style>
</head>
<body>
<div class="box">
    <img src="img/10.jpg" alt="">
    <div class="hidden"></div>
</div>
</body>
</html>

7.4 css3新属性兼容性

通过厂商前缀解决兼容问题
-moz- 火狐
-webkit- 谷歌苹果
-ms- IE
-o- opera
blink内核谷歌和欧朋用

        body{
            /*火狐前缀*/
            -moz-border-radius: 20px;
            /*ie前缀*/
            -ms-border-radius: 20px;
        }

7.5 ie低版本兼容性

条件注释

    <!--[if IE 7]>
    <style>
        body {
            background-color: green;
        }
    </style>
    <![endif]-->
...
<body>
这是主体
<!--[if IE]>
这是ie浏览器
<![endif]-->
</body>

前缀后缀法,参考
https://blog.csdn.net/freshlover/article/details/12132801

7.6 背景渐变

.box {
            width: 500px;
            height: 500px;
            border: 2px solid #000;
            /*渐变 方向去右下 颜色 */
            /*background: linear-gradient(to right bottom, red, pink, purple);*/
            /*径向渐变 左上开始 形状圆 兼容谷歌*/
            /*background: -webkit-radial-gradient(top left,circle, red, orange, purple, pink, green);*/
        }

7.7 绘制特殊图形

        /*使用边框绘制向下三角*/
        .box {
            width: 0px;
            height: 0px;
            border-top: 30px solid red;
            /*border-bottom: 30px solid pink;*/
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
        }

梯形设置宽度即可

7.8 动画

animation 关键帧动画,控制变化过程

        .box {
            width: 200px;
            height: 200px;
            border: 2px solid black;
            /*调用动画 持续3s 速度类型 延迟 播放次数(无线循环infinate) 播放方向(第二次倒放) forwards动画停在最后一帧*/
            /*兼容加厂商前缀*/
            /*属性可以分开写*/
            /*animation: change 3s ease-in 2s 3 alternate forwards;*/
        }
        /*鼠标悬停调用*/
        /*.box:hover{*/
            /*animation: change 5s;*/
        /*}*/
        /*定义动画 兼容加厂商前缀 -ms-keyframes*/
        @keyframes change {
            0% {
                width: 600px;
                border: 20px solid red;
            }
            10%{
                border-radius: 50%;
            }
            35%{
                margin-top: 400px;
                margin-left: 400px;
                width: 200px;
            }
            100%{
                background-color: pink;
            }
        }

7.9 媒体查询

响应式布局,适应多终端
< 768 移动端
> 992 pc端
其间 pad

        /*公共样式写在外部*/
        /*pc端*/
        @media screen and (min-width: 992px) {
            body {
                background-color: pink;
            }
        }
        /*pad端*/
        @media screen and (min-width: 769px) and  (max-width: 991px){
            body {
                background-color: blue;
            }
        }
        /*移动端*/
        @media screen and (max-width: 768px) {
            body {
                background-color: red;
            }
        }

布局案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            /*响应式布局不设高度,由内容撑开*/
            margin: 0 auto;
        }
        .box>div{
            width: 229px;
            height: 274px;
            background-color: pink;
            float: left;
            margin-right: 10px;
        }

        /*pc端*/
        @media screen and (min-width: 992px){
            .box {
                /*响应式布局不设高度,由内容撑开*/
                width: 946px;
            }
            .box>div:last-child{
                margin-right: 0px;
            }
        }
        /*pad端*/
        @media screen and (max-width: 991px) and (min-width: 511px) {
            .box {
                /*响应式布局不设高度,由内容撑开*/
                width: 468px;
            }
            .box>div{
                margin-bottom: 10px;
            }
            .box>div:last-child, .box>div:nth-child(2){
                margin-right: 0px;
            }
        }
        /*移动端*/
        @media screen and (max-width: 510px) {
            .box{
                width: 307px;
            }
            .box>div{
                width: 307px;
                height: 256px;
                margin-right: 0;
                margin-bottom: 10px;
            }
        }
    </style>
    <!--网页宽度适应设备宽度-->
    <meta name="viewport" content="initial-scale=1.0, width=device-width" />
</head>
<body>
<div class="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
</body>
</html>

7.10 字体图标

图标比图片加载要快
阿里矢量库
https://www.iconfont.cn/
登录 -> 图标加入到购物车 -> 下载代码
复制iconfont.css \ iconfont.eot \ iconfont.svg \ iconfont.ttf \ iconfont.woff到项目目录
demo_index.html可以查看图标unicode码

...
    <style>
        /*字体属性对字体图标也有效*/
        .iconfont{
            font-size: 22px;
            color: red;
        }
    </style>
</head>
<body>
<i class="iconfont">&#x344b;</i>
<button class="iconfont">&#x344b;</button>
<input type="submit" value="&#x344b;" class="iconfont"/>
...

7.11 多列

文字分多列显示

      .box {
            width: 500px;
            height: 300px;
            border: 1px solid red;
            /*3列*/
            column-count: 3;
            /*间距*/
            column-gap: 50px;
            /*间距边框*/
            column-rule: 3px dotted purple;
        }

7.12 雪碧图

多张小图合并到一张大图,减少网络请求
使用背景图引入,定位
ps 矩形选框工具量尺寸
切片工具切图 alt拖动
存储为 -> web所用格式 -> png8(颜色多可以用24) -> 所有用户切片
使用csssprite软件生成雪碧图
是否是手机端 -> 选择css代码
软件会显示图片定位

        .one,.two{
            width: 21px;
            height: 29px;
            border: 1px solid red;
            background: url("img/images/enter.png") no-repeat;
        }
        .two {
            background-position: -21px 0;
        }
        .three{
            width: 43px;
            height: 40px;
            border: 1px solid pink;
            background: url("img/images/enter.png") no-repeat;
            background-position: -42px 0;
        }

前端-索引
前端-01-web基础[https://www.jianshu.com/p/6fffe24824c9]前端-02-...
前端-01-web基础
1 常用标签 1.1 h1-h6 是块级元素独占一行,行内元素同行显示,p标签也是块级元素 1.2 右对齐只对块...
day21-HTML
01-web基础: 1.web标准:万维网-w3c结构标准:HTML ---决定网页上有什么东西(能够显示什么内容...
前端基础进阶系列
前端基础进阶（一）：内存空间详细图解前端基础进阶（二）：执行上下文详细图解前端基础进阶（三）：变量对象详解前端基础...
前端入门系列
前端HTML & CSS 基础入门（1）初识前端HTML & CSS 基础入门（2）段落及文本前端HTML &...
二、flask开发基础与入门
一、web开发基础 1、前端知识前端开发基础： HTML CSS JavaScript 前端常用的库与框架： b...
【350页】前端校招面试题及解析大全
前言前端校招面试题主要内容包括html，css，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据...
web前端入门基础
web前端基础笔记学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。下面我们就来了...
HTML基础学习笔记
原 Blog 链接：HTML基础学习笔记自学 html 基础笔记 Web 前端简单介绍 web 前端包含： pc...
学习Vue框架之前，要有JavaScript的知识储备
前端三剑客知识储备（有关前端的专题） ☑ HTML基础知识 ☑ CSS基础知识 ☑ JavaScript5基础知识...

前端-01-web基础

1 常用标签

1.1 h1-h6

1.2 右对齐

1.3 webstorm生成一些文字

1.4 img是行内元素

1.5 所有有内容的元素都有title属性

1.6 a标签

1.7 文本格式标签

1.8 语义化标签

1.9 实体字符

1.10 列表

1.11 表格

1.12 内联框架

1.13 表单

1.14 H5新增input类型

1.15 H5新增属性

1.16 H5新增标签

2 CSS-基础样式\选择器

2.1 实现内容与表现的分离,提高重用性和可维护性

2.2 @import与link的区别

2.3 选择器

2.4 行内元素与块级元素区别

2.5 黑白瀑布流练习

2.6 背景属性

2.7 字体属性

2.8 text属性

2.9 列表属性

2.10 css其他属性

2.11 overflow属性

2.12 多余文本省略号

2.13 关系选择器

2.14 伪类选择器

2.15 css3新增伪类选择器

3 CSS-盒模型 | 新增选择器

3.1 标准盒模型

3.2 padding

3.3 金立布局

3.4 css3新增伪类选择器

3.5 伪对象选择器

3.6 属性选择器

4 CSS-浮动与定位

4.1 浮动

常用5种清除浮动的方式

4.2 金立导航条练习

5 CSS-弹性盒模型

5.1 弹性盒模型

5.2 水平垂直居中

5.3 百度周边练习

6 CSS-display属性及应用

6.1 display

6.2 display hidden应用

7 过渡和动画

7.1 圆角和阴影

7.2 转换

7.3 过渡

7.4 css3新属性兼容性

7.5 ie低版本兼容性

7.6 背景渐变

7.7 绘制特殊图形

7.8 动画

7.9 媒体查询

7.10 字体图标

7.11 多列

7.12 雪碧图

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读