当前栏目: [前端开发基础]您现在的位置是:成都seo > 前端学习 > 前端开发基础 > 正文

前端开发基础学习第十九天

2020-04-20 00:02前端开发基础 人已围观文章来源:未知文章作者:admin

简介1.行内块元素 做成 上一页,下一页 text-align: center; 可以是行内块水平居中 1.选项翻页 !DOCTYPE html html lang=en head meta...

1.行内块元素
 
做成 上一页,下一页 
 
text-align: center;
 
可以是行内块水平居中
 
-----------------------效果--------------------------------------
2 3 4 5 6 ... 到第
------------源码----------------------
1.选项翻页
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01.css行内块应用</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            text-align: center;
        }
        .box a {
            display: inline-block;
            background-color: #ccc;
            border: 1px solid rgb(165, 164, 164);
            width: 40px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            text-decoration: none;
            font-size: 14px;
        }
        .box .prev,
        .box .next {
            width: 65px;
            height: 30px;
        }
        .box input {
            width: 40px;
            height: 30px;
        }
        .box button {
            width: 40px;
            height: 30px;
            background-color: #ccc;
            border: 1px solid rgb(165, 164, 164);
        }
        .box .current,
        .box .elp
         {
            border: none;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="#" class="prev">&lt;&lt;上一页</a>
        <a href="#" class="current">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#" class="elp">...</a>
        <a href="#" class="next">&gt;&gt;下一页</a>
        到第<input type="text" name="" id="">
        页
        <button>确定</button>
    </div>
</body>
</html>
 
------------------------------------
-----CSS直角三角形的写法效果--------
前端,开发,基础,学习,第十,九天,行内,块,元素, . 前端开发基础学习第十九天
-----CSS直角三角形的写法源码--------
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02.css直角三角形的做法</title>
<style>
    .box {
        width: 0;
        height: 0;
        /* 把上边的宽度变高,并且透明 */
        border-top:100px solid transparent;
        /* 右边直角三角形变大 */
        border-right: 50px solid red;
        border-bottom: 0 solid red;
        border-left: 0 solid red ;
    }
 
/* 代码简写 */
.box-2 {
    width: 0;
    height: 0;
    /*1. 只保留右边颜色 */
    border-color: transparent yellow transparent transparent;
    /*2. 样式都是solid */
    border-style: solid;
    /* 3.上边宽度变大,右边宽度稍小, 其余边框为0 */
    border-width: 100px 50px 0 0;
 
}
 
 
</style>
 
</head>
<body>
    <div class="box-2"></div>
    <div class="box"></div>
    
</body>
</html>
 
--------------------------------
---------秒杀价格效果-------
前端,开发,基础,学习,第十,九天,行内,块,元素, . 前端开发基础学习第十九天
---------秒杀价格源码-------
 
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03.秒杀</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 160px;
            height: 24px;
            border: 1px solid red;
            margin: 0 auto;
            text-align: center;
            line-height: 24px;
        }
        .current {
            position: relative;
            float: left;
            width: 90px;
            height: 100%;
            background-color: red;
            margin-right: 8px;
            font-size: 14px;
            color:#fff;
        }
         .current i{
            position: absolute;
            right: 0;
            top: 0;
            width: 0;
            height: 0;
            border-color: transparent #fff transparent transparent;
            border-style:solid ;
            border-width: 24px 12px 0px 0px ;
        }
        .right {
            font-size: 12px;
            color:gray;
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <div class="box">
        <span class="current">¥1650
            <i></i>
        </span>
        <span class="right">¥5650</span>
    </div>
</body>
</html>
 
--------------------------------------
CSS初始化
/* 清楚内外边距 */
* {
margin: 0;
padding: 0
}
 
/* 字体不倾斜 */
em,i {
font-style: normal
}
 
/* 清除列表样式 */
li {
list-style: none
}
 
 
img {
    /* 兼容低版本图片边框不显示 */
    border: 0;
    /* 清除图片缝隙 */
vertical-align: middle
}
 
/* 按钮默认为小手 */
button {
cursor: pointer
}
 
/* 清除a链接下划线 */
a {
color: #666;
text-decoration: none
}
 
/* 默认移动样式 */
a:hover {
color: #c81623
}
 
/* B8BF53 字符unicode 编码 字体不乱码 */
button,input {
font-family: Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"B8BF53",sans-serif
}
 
body {
    /* css3 抗锯齿行 让文字显示的更加清晰 */
-webkit-font-smoothing: antialiased;
    background-color: #fff;
    /* font: 12px/1.5  12px字体大小 1.5*12px= 18px 行高 */
font: 12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"B8BF53",sans-serif;
color: #666
}
 
/* 自定义隐藏样式 */
.hide,.none {
display: none
}
 
/* 清除盒子塌陷 */
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
 
.clearfix {
*zoom: 1
}
 
-----------------------------------------
HTML5 和 css3 提高
 
HTML5的新特性
 
新增语义化标签
 
新的标签:
 
新的表单:
 
新的表单属性:
 
IE9以上兼容
----------------------------------
header:头部标签
 
nav:导航标签
 
article:内容标签
 
section:自定义区域
 
aside:侧边栏标签
 
footer:底部标签
 
注意:在IE9 转化为块级元素
 
-------------------------------------------------
多媒体标签
 
1.音频 : audio
<audio  src="文件地址" controls ="controls'></audio>
 
2.视频: video
 
语法
<video src="文件地址" controls ="controls' muted="muted"><video>
 
新增input 表单
-------------------html5表单效果-----------------------
前端,开发,基础,学习,第十,九天,行内,块,元素, . 前端开发基础学习第十九天
-------------------html5表单源码-----------------
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05.html5表单</title>
</head>
<body>
    <form action="">
        <ul>
            <li>邮箱:<input type="email"></li>
            <li>网址:<input type="url"></li>
            <li>日期:<input type="date"></li>
            <li>时间:<input type="time"></li>
            <li>数量:<input type="number"></li>
            <li>手机号码:<input type="tel"></li>
            <li>搜索:<input type="search"></li>
            <li>颜色<input type="color"></li>
            <li><input type="submit" value="提交"></li>
        </ul>
    </form>
</body>
</html>
 
----------------------------------------
新增表单属性
 
属性 说明
required required 表示内容不能为空
 
placehoder 提示文本(灰色文字) 表示默认提示文字
 
autofocus autofocus 表示自动聚焦在文本内
 
autocomplete off/on 键入提交的值显示,默认开启 一般需要关闭
 
multiple mutiple 同时提交多个文件
 
 
------------------------------------------
css3的新特性
 
1.属性选择器
标签[属性] 
 
选择属性
 
/*选择第一个*/
input[value] {
 
}
-----------------------------
<input type="text" value="请输入用户名">
 
<input type="text">
 
选择属性值
/*选择第一个*/
 
input[type=text] 
--------------------------------------
<input type="text" value="请输入用户名">
 
<input type="password" name="" id="" >
 
---------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>06.属性选择器</title>
    <style>
 
        /* 选择class类样式icon开头所有的元素 */
        div[class^=icon] {
            color:yellow;
        }
 
         /* 选择class类样式icon结尾所有的元素 */
         section[class$=data] {
             color: red;
         }
 
          /* 包含类名  */
 
          div[class*=icon] {
            color: blue;
          }
 
    </style>
</head>
<body>
    <!-- 以什么开头 -->
    <div class="icon1">1</div>
    <div class="icon2">2</div>
    <div class="icon3">3</div>
    <div class="icon4">4</div>
    <div class="icon5">5</div>
    <div class="x">zxcz</div>
 
    <!-- 以什么结尾 -->
    <section class="icon1-data">asd </section>
    <section class="icon2-data">asd </section>
    <section class="icon3">sad asd </section>
 
    <!-- 包含类名 -->
*
</body>
</html>
 
 
注意:类选择,属性选择器,伪类选择器,权重为10
 
 
2.结构伪类选择器
 
3.伪元素选择器
 
 
 
 
 

Tags:

说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!

本栏推荐

标签云

站点信息

  • 文章统计98篇文章
  • 标签管理标签云
  • 微信公众号:扫描二维码,关注我们