重修课程day47（前端二之html二和css一）

一列表标签

　ul标签：无序列表

　ol标签：有序列表

　li标签：写在ul和ol标签里面的

　dl标签：定义列表

　　dt标签和dd标签：都写在dl里面的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>
<ol>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ol>

<dl>
    <dt>选项</dt>
    <dd>111</dd>
    <dd>222</dd>
</dl>
</body>
</html>

二表单标签

　form标签：

　　cation属性：提交的地址或着路径，提交后的内容是一个键值对的格式。

　　input标签：写在form标签里面的

　　　type属性：类型

　　　　（text：明文；password：密文；checkbox：多选框，根据选出来的内容对键值对相对应的key下面的列表添加值；radio：单选框，需要做约束，相对应的name值要一样；file：选择文件，这个里面的数据不会放在键值对里面；submit：提交；reset：重置；button：按钮，只是一个单纯的按钮，好用与js操作）

　　　placeholder属性：灰色提示信息

　　　name属性：键值对的key，没有这个就不会提交成功

　　　value属性：键值对的值，被列表包起来，根据type的属性不同，value的值就会不同

　　textarea标签：文本框

　　　cols属性：设置行宽

　　　rows属性：设置列的高

　　　name：key，键值对的key

　　　value：值，键值对的值

　　select标签：下拉框标签

　　　name属性：放在select标签里面的，键值对的key

　　　multiple属性：多选文本，放在select标签里面的

　　　size属性：多显框显示的个数

　　　option标签：选择下拉框

　　　　value：放在option标签里面的，键值对的值

　　lable标签：只接收文本，与input标签做关联

　　　for属性：用id关联。　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="http://127.0.0.1:9000/reg/">
    <p><label for="11">姓名</label>
        <input type="text" name="name" placeholder="请输入用户名" id="11"></p>
    <p><label for="22">密码</label>
        <input type="password" name="pwd" placeholder="请输入密码" id="22"></p>
    <p>爱好<input type="checkbox" name="hobbes" value="basketball">篮球
        <input type="checkbox" name="hobbies" value="football">足球
        <input type="checkbox" name="hobbies" value="badminton">羽毛球 </p>
    <p>性别<input type="radio" name="sex" value="male">男
        <input type="radio" name="sex" value="female">女</p>
    <p>选择文件<input type="file"></p>
    <textarea name="information" id="1" cols="30" rows="10"></textarea>
    <p><select name="address" id="4" multiple="multiple" size="2">
        <option>请输入省份</option>
        <option value="henan">河南省</option>
        <option value="hebei">河北省</option>
        <option value="hubei">湖北省</option>
    </select></p>
    <p><input type="reset" value="重置"></p>
    <p><input type="button" value="普通按钮"></p>
    <p><input type="submit" value="提交"></p>
</form>
</body>
</html>

三 css介绍

　什么是css：就是网页的布局和渲染效果

　什么是查找标签：就是操作标签、

　如何进行查找标签：将需要操作的标签查找方法写在style标签里面，在这个里面之姐就可以操作，对相对应的标签进行布局和渲染

　style标签：里面写的都是css代码，进行操作标签，使标签的展现更加美观。

四 css的引入方式

　1 行列式：直接在标签的里面加上style属性，后面写上操作

<p style="background-color: rebeccapurple">hello yuan</p>

　2 嵌入式：使用style标签，将相对应的操作写在style标签里面

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: #2b99ff;
        }
    </style>
</head>

　3 链接式：将相对应的操作写在一个css文件的里面，然后子使用link引入过来

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

　4 导入式：将文件路径放在style标签里的type属性里面，然后用@import在style标签里面引入文件

<style type="text/css">

          @import"mystyle.css"; 此处要注意.css文件的路径

</style>

五 css的选择器

　1 基本选择器

　　标签选择器：使用某些标签名对相对应的标签进行操作

　　id选择器：给相对应的标签设置id，id不能重复，然后在根据id号对相对应的标签进行操作，引入时id号前面需要加上#号

　　class选择器：给相对应的标签取一个类名，然后在跟类名对相对应的标签进行操作，class值可以重发，并且还可以传入多个值，引入时class值的前面加上一个点（.）

　　通配选择器：*号，找到所有的标签一起操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color:red;
        }

        .c1{
            color: #00A7FD;
        }

        #d1{
            color:#0a8e6c;
        }
    </style>
</head>
<body>
<div>div1</div>
<div class="c1">div2</div>
<div id="d1">div3</div>
</body>
</html>

　2 组合选择器：用于嵌套标签进行查找，可以多级进行同时查找，还可以不同的选择器联合使用

　　后代选择器：空格。父标签查找出来，然后加上空格，然后加上需要查找的后代标签。

　　子代选择器：> 。父标签查找出来后，然后加上 >，在加上需要查找的子代标签。

　　毗邻选择器： + 。找到该标签同级的下一个标签。

　　兄弟选择器： ~。查找该标签的同级标签，只能够想后面找。

　　多元素选择器：，（逗号）。同时查找不同的标签，并且class值也不同

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .d1 .p1{
            color: #00A7FD;
        }

        .d2>.p2{
            color:#0000CC;
        }

        .d3+.p3{
            color:#ffff00;
        }

        .d4~.p4{
            color:#ff2200;
        }
    </style>
</head>
<body>

<div class="d1">
    <div>
        <div>
            <p class="p1">p2</p>
        </div>
    </div>
    <p class="p1">p1</p>
</div>

<div class="d2">
    <div>
        <div>
            <p class="p2">p3</p>
        </div>
    </div>
    <p class="p2">p4</p>
</div>

<div class="d3"></div>
<p class="p3">p5</p>
<p class="p3">p6</p>

<div class="d4"></div>
<p class="p4">p7</p>
<p class="p4">p8</p>
</body>
</html>

　3 属性选择器：[ ](中括号和)，中括号里面放的是属性名

　　~：匹配其中的一个属性值

　　*：如果匹配的属性值包含某个字母，就能够匹配出来

　　^：匹配属性值的开头

　　$：匹配属性值的结尾

　　直接将属性名放进去：找出包含有这个属性的标签。如果属性的筛选不出来可以加上属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [fang]{
            color: #ff2200;
        }

        [jie=j1]{
            color:#ffee58;
        }

        [yi~=y1]{
            color:#0000CC;
        }

        [he*=sa]{
            color: #0a8e6c;
        }

        [dong^=d]{
            color:#0C5404;
        }

        [lei$=l]{
            color:#9c1b6a;
        }
    </style>
</head>
<body>

<div fang="f1">div</div>
<div fang="f2">div1</div>

<div jie="j1">div2</div>
<div jie="j2">div3</div>

<div yi="y1">div4</div>
<div yi="y2">div5</div>

<div he="hsa1">div6</div>
<div he="hsada2">div7</div>

<div dong="dda">div8</div>
<div dong="asda">div9</div>

<div lei="asdl">div10</div>
<div lei="sasad">div11</div>
</body>
</html>

六选择器的优先级

　从低到高：

　　标签查找：1====》class类查找：10====》id查找：100====》在标签内部使用style属性：1000====》！important

　当优先级一样时，谁后加载就显示谁

　！important：所有的规则都失效，按照这个的规则执行。

　什么是继承：继承父标签的颜色和字体，其他的都不能继承。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        div{
            color:#2e2e2e;
        }
        .d1{
            color: red;
        }

        #d2{
            color:#00b6ee;
        }

        .p1{
            color:#ffea00;
        }
    </style>
</head>
<body>

<div class="d1">
    <p >p1</p>
    <p id="d2" class="p1">p2</p>
    <p>p3</p>
</div>
</body>
</html>

七 css的一些操作

　颜色设置：

　　color：设置颜色

　　background-color：设置背景颜色

　　opacity：透明度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .d1{
            background-color: #ffea00;
            opacity: 0.5;
        }

        .p1{
            color:#ff1744;
        }
    </style>
</head>
<body>

<div class="d1">
    <p class="p1">ppp</p>
</div>
</body>
</html>

　字体设置：

　　font-size：设置字体大小

　　font-weight：设置字体的粗细

　　font-style：字体变斜体

　　font-family：字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .s1{
            font-size:30px;
        }

        .s2{
            font-weight:600;
            font-style: italic;
        }

        .s3{
            font-family: normal;
        }
    </style>
</head>
<body>

<span class="s1">spqn1</span>
<span class="s2">spqn2</span>
<span class="s3">spqn3</span>
</body>
</html>

　位置操作：

　　text-algin：水平设置

　　text-indent：首行缩进

　　line-height：调上下，行高，垂直居中

　　float：悬浮（left：向左飘；right：向右飘）注意：非浮动元素正常显示；如果是浮点元素，会根据他上一个元素是否浮动判断位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .d1{
            width: 100%;
            height:70px;
            background-color:darkgrey;
        }

        p{
            text-align: center;
        }

        .s1{
            line-height:70px;
        }
    </style>
</head>
<body>
<div class="d1">
    <p><span class="s1">hello</span></p>

</div>
</body>
</html>

　边框设置：

　　border：边框

　　padding：设置内边距

　　margin：设置外边距

　　（bottom：下；top：上；left：左；right：右）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .d1{
            width:200px;
            height:200px;
            background-color: #ff1744;
            border: 5px solid #0C5404;
            margin-bottom: 30px;
        }

        .d2{
            width:200px;
            height:150px;
            background-color: #00b6ee;
            padding: 100px ;
            margin-left: 20px;
        }
    </style>
</head>
<body>

<div class="d1"></div>
<div class="d2"></div>
</body>

　其他操作：

　　text-decoration：设置样式：None；去掉某些标签的特殊符号

　　width：设置长

　　height：设置宽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .a1{
            text-decoration:None;
        }
    </style>
</head>
<body>
<a href="#">继续</a>
<a href="about:cehome?from=extra_start" class="a1">点击</a>
</body>
</html>

练习:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            width: 100%;
            height: 50px;
            background-color:#DDDDDD;
            opacity: 0.3;
        }

        .c4{
            width:80%;
            height:50px;
            background-color:#DDDDDD;
            margin-left: 10%;
        }

        .c7{
            width: 100px;
            height: 50px;
            float:left;
        }

        .c8{
            width: 80px;
            height: 50px;
            float:right;
        }

        .c9{
            width: 120px;
            height: 50px;
            float:right;
        }

        .c10{
            width: 80px;
            height: 50px;
            float:right;
        }

        .c11{
            width: 80px;
            height: 50px;
            float:right;
        }

         .c12{
             width: 50px;
             height: 50px;
             float:right;
        }

        .s1{
            line-height:50px;
            text-align: center;
            color:#1F1E1E;
        }

        .c2{
            width:100%;
            height: 60px;
            background-color: #ffffff;
        }

        .c5{
            width: 80%;
            height: 60px;
            background-color: #FFFFFF;
            margin-left: 10%;
        }
        .c3{
            width:100%;
            height:auto;

        }

        .c6{
            width: 80%;
            height: auto;
            margin-left: 10%;
        }

        .d1{
            width: 500px;
            height: 400px;
            float: left;
            margin-top: 50px;
        }

        .d3{
            width: 500px;
            height: 50px;
            margin-top:60px;
        }

        .s2{
            font-weight:600;
            font-size:30px;
            color: #2e2e2e;
            line-height:50px;
            margin-left: 70px;

        }

        .p1{
            margin-left: 120px;
        }

        .p2{
            margin-left: 104px;
        }

        .i1{
            width:70px;
        }

        .i2{
            margin-left: 15px;
        }
        .p3{
            margin-left: 120px;
        }

        .s3{
            color:red;
        }

        .p4{
            margin-left: 150px;
        }

        .s4{
            color:#0000CC;
        }

        .i3{
            font-size: 14px;
        }

        .p5{
            margin-left: 200px;
        }

        .i5{
            font-size: 10px;
             background-color:red;
        }

        .d2{
            width: 314px;
            height:400px;
            float: right;
            margin-top: 50px;
        }

        .p6{
            margin-left:30px;
        }

        .s5{
            margin-left: 8px;
            color:#0000CC;
        }

        .p7{
            margin-top: 50px;
        }

        .s6{
            font-size: 12px;
        }
    </style>
</head>
<body>

<div class="c1">
    <div class="c4">
        <div class="c7"><span class="s1">*收藏网址</span></div>
        <div class="c8"><span class="s1">客户服务</span></div>
        <div class="c9"><span class="s1">VIP会员俱乐部</span></div>
        <div class="c10"><span class="s1">我的订单</span></div>
        <div class="c11"><span class="s1">免费注册</span></div>
        <div class="c12"><span class="s1">登陆</span></div>
    </div>
</div>
<div class="c2">
    <div class="c5"><img src="111.png" alt="悟空"></div>
</div>
<div class="c3">
    <div class="c6">
        <div class="d1">
            <div class="d3"><span class="s2">注册新用户</span></div>
            <form>
                <p class="p1"><span class="s3">*</span>用户名：<input type="text" name="user" class="i2"></p>
                <p class="p1"><span class="s3">*</span>手机号：<input type="text" name="phone" class="i2"></p>
                <p class="p2"><span class="s3">*</span>登陆密码：<input type="password" name="passwd" class="i2"></p>
                <p class="p2"><span class="s3">*</span>确认密码：<input type="password" name="pwd" class="i2"></p>
                <p class="p3"><span class="s3">*</span>验证码：<input type="text" name="yanzheng" class="i1 i2"></p>
                <p class="p4"><input type="checkbox" name="ppp"><span class="i3">我已阅读并同意</span><span class="s4 i3">《用户注册协议》</span> </p>
                <p class="p5"><input type="button" value="同意以上协议并注册" class="i5"></p>
            </form>
        </div>
        <div class="d2">
            <p class="p6"><span class="s6">我已经注册，现在就</span><span class="s5 s6">登陆</span></p>
            <p class="p6 p7"><img src="222.png" alt="悟天" width=‘250px‘ height="200px"></p>
        </div>
    </div>
</div>
</body>
</html>

结果：

时间： 2024-10-12 09:11:34

重修课程day47（前端二之html二和css一）的相关文章

Andrew Ng机器学习课程笔记（二）之逻辑回归

Andrew Ng机器学习课程笔记(二)之逻辑回归版权声明:本文为博主原创文章,转载请指明转载地址 http://www.cnblogs.com/fydeblog/p/7364598.html 前言学习了Andrew Ng课程,开始写了一些笔记,现在写完第5章了,先把这5章的内容放在博客中,后面的内容会陆续更新! 这篇博客主要记录了Andrew Ng课程第二章逻辑回归的笔记,主要介绍了梯度下降法,逻辑回归的损失函数,多类别分类等等简要介绍:逻辑回归算法是分类算法,我们将它作为分类算法使用.

小米前端二面面经

title: 小米前端二面面经 toc: true date: 2018-10-20 13:04:04 categories: Web tags: JavaScript HTTP TCP UDP Cookie 正好都是不会的...所以完整地记录一下. 简单来说就是JS和网络掌握地并不是很全面. JavaScript严格模式 ES5中新增use strict 不允许使用未声明的变量: "use strict"; x = 3.14; // 报错 (x 未定义) "use stri

Web前端开发实战6：CSS实现导航菜单结合二级下拉式菜单的简单变换

前面几篇博文都在讲导航菜单和二级下拉式菜单,其实有很多方法都可以实现的,具体的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果,由于在学习Ajax和jQuery的初步阶段,对于很多的复杂的导航菜单和二级下拉式菜单没法做,但是学习了CSS和JS还是能实现一些简单的变换的.这篇博文就来说说用CSS实现导航菜单结合二级下拉式菜单的两个简单变换吧. 首先还是在前面博文的基础上加以实现,其实只用HTML和CSS还是可以做出不错的效果,但是相较于JS和 jQuery来说就有很

Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)

Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维护,根据MIT许可证发布,支持 Windows.Linux 以及 OS X 平台. Brackets 的特点是简约.优雅.快捷!它没有很多的视图或者面板,也没太多花哨的功能,它的核心目标是减少在开发过程中那些效率低下的重复性工作,例如浏览器刷新,修改元素的样式,搜索功能等等.和 Sublime Text.Everedit 等通用代码编辑器

web前端开发教程：div+css的6个优点

关于div+css你知道多少?XHTML网站设计标准中,不再使用表格定位技术,而是采用div+css的方式实现各种定位.一般来说,div+css是web设计标准,它是一种网页的布局方法,与传统中经过表格(table)布局定位的方法有所区别,它能够完成页面页面内容与体现相别离, 那么你在前端开发学习对div+css的优点了解多少呢?接下来Div css教程学习中,为大家介绍web前端开发中div+css的6个优点. 介绍web前端开发中div+css的6个优点 1.契合W3C规范标准.这确保您的网

前端html、Javascript、CSS技术小结

简单地总结了一下前端用过的html.javascript.css技术,算是清点一下,做个大略的小结,为进一步的学习给个纲领. 一.HTML 由于HTML5的兴起,简单地判断一个网页是否是html5网页,只需要找找内部是否有html5的标志性标签就行了.然而平时虽然写了不少html,却没怎么关注它的发展史: GML(Generalized Marcup Language)通用标记语言和SGML(Standard Generalized Markup Language)标准通用标记语言. 由Tim

进击的Python【第十三章】：Web前端基础之HTML与CSS样式

进击的Python[第十四章]:Web前端基础之HTML与CSS样式一.web框架的本质众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. #!/usr/bin/env python #coding:utf-8 import socket def handle_request(client): buf = client.recv(1024) client.send("HTTP/1.1 200 OK\r\n\r\n")

(转)BAT及各大互联网公司2014前端笔试面试题--Html,Css篇

BAT及各大互联网公司2014前端笔试面试题--Html,Css篇很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习前端基础更是大有裨益. 而更多的题目是我一路以来收集的,也有往年的,答案不确保一定正确,如有错误或有更好的解法,还请斧正. 前面几题是会很基础,越下越有深度. 附上第一篇:BAT及各大互联网公司2014前端笔试面试题--JavaScript篇 Html篇: 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什

web前端入门到实战：CSS实现平行四边形布局效果

如何实现下图所示的平行四边形布局效果? 一.skewX的局限一提到平行四边形,条件反射般的就会想起CSS transform中的skew()/skewX()/skewY()方法,可以让元素斜切,从而实现平行四边形效果 HTML如下: <div class="input-x"> <input class="input" placeholder="您的姓名"> </div> CSS如下,形状的关键就是下面红色高亮