React --- css.html

最新推荐文章于 2021-06-23 20:33:37 发布

qq_41279327

最新推荐文章于 2021-06-23 20:33:37 发布

阅读量104

点赞数

分类专栏：网页学习

本文链接：https://blog.csdn.net/qq_41279327/article/details/104905477

版权

网页学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

以下是html和css代码

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- https://www.jb51.net/article/123738.htm VsCode插件整理（小结） -->
    <!-- html:5直接生成html文件 table>tr*3>td*3
        tr：行 
        td:列  
        width: 500px
        height: 500px
        text-align: center:文本居中
        border="1":边框 
        colspan="2":合并列
    -->

    <table style="width: 500px;height: 500px;text-align: center;" border="5">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>

    <table style="width: 500px;height: 500px;text-align: center;" border="1">
        <tr>
            <td>1</td>
            <td colspan="2">2</td>
            
        </tr>
        <tr>
            <td rowspan="2">4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>

    		<!--input标签要放在form标签中
			接收用户的输入信息的输入域
			属性：
				id:某个标签的唯一标识，不允许重复
				size:可以设置输入框的显示宽度
				maxlength:设置输入框中最长允许输入的字符个数
				disabeled:设置该输入框不能使用，即使有name 和 value值都不会被提交
				readonly: 只读不许修改，内容可以被提交
				placeholder:占位符
				***value:输入框中接收的用户的输入的数据
				***name:如果需要将数据传输到服务器，要设置name属性  相当于key 与value属性对应
				***type:输入的方式
					|-text 单行文本域  默认文本域的长度是20个字符 
					|-password 密码输入框，默认是以圆点替代输入的内容
					|-radio 单选框，具有互斥性，是通过name属性来协同完成，一般情况我们需要对value赋个既定的值
					|-checkbox 复选框 可以选择多个
					|-hidden 隐藏输入框       需要发送给服务器的数据但是又不需要在页面上显示
					|-file  文件域
					|-submit 提交按钮
					|-reset  重置按钮
					|-button 普通按钮   多数情况下  是配合javascript一起使用
				checked:用来表示radio或者checkbox中的某一项被选中
				
		-->
    <form action="www.baidu.com" method="GET">
        姓名：<input type="text" size="35" name="name" value="雷军"> <br>
        密码：<input type="password" name="pwd" >
    </form>
    		<!--下拉框标签
			select 父标签
				|-option  选项
					option 属性：
						selected:表示该项是否被选中
						value:
			select 属性：默认是单选
				name:
				size: 多选时，设置下拉框可见的选项的数量
				multiple:设置下拉框是否为多选，设置multiple = "multiple"表示为多选
				
				注意：去掉size 那么同时也要去掉multiple
			
		-->
    <form action="" method="get">
        城市：<select name="city" size="3" multiple="multiple">
            <option value="请选择" selected="selected">--请选择--</option>
            <option value="0">上海</option>
            <option value="1">北京</option>
            <option value="2">杭州</option>
            <option value="3">深圳</option>
        </select>
        
        <input type="submit" value="提交"/>
    </form>
    <!--多行文本域标签 textarea  属性：cols: 设置列数  rows: 设置行数-->
    <form action="" method="get">
        <textarea name="txt" rows="10" cols="20">

        </textarea>
        <br />
        <input type="submit" value="提交"/>
    </form>


</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒模型布局</title>

    <style>
        .box_01{
            background-color: lightgrey;
            width: 300px;
            border: 25px solid green;
            padding: 50px;
            margin: 25px;
        }
    </style>
</head>
<body >

        <!-- div 是独占一行的 作用是用来划分区域  style属性：可以设置标签的样式，记得要放在开始标签
             ***注意：id,class,style是所有标签的通用属性-->
		<div style="width: 300px;height:300px;background: red;">11</div>22
		<div style="width:200px;height:200px;background: green;">12</div>
        <div style="width:100px;height: 100px;background: blue;">13</div>
        
        <!-- HTML <span> 元素是行内元素，能够用作文本的容器。 设置 <span> 元素的类，能够为相同的 <span> 元素设置相同的样式。 -->
        <h1>我的<span class="red" style="color: red;">重要的</span>标题</h1>

        <!--Margin(外边距) - 清除边框外的区域，外边距是透明的。
            Border(边框) - 围绕在内边距和内容外的边框。
            Padding(内边距) - 清除内容周围的区域，内边距是透明的。
            Content(内容) - 盒子的内容，显示文本和图像 -->
        <h2>盒子模型演示</h2>
        <p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p>
        <div class="box_01">这里是盒子内的实际内容。有 50px 内间距，25px 外间距、25px 绿色边框。</div>
    
        <!-- 浮动可以使得元素按指定方向排列，直到遇到父元素的边界或另一个浮动元素停止。
            效果：两个元素并排，且两个元素都能够设置宽度和高度。如下：float:left;  float:right;  -->

            <div class="box1" style="width: 300px;height: 300px;background-color:green;float: left;"></div>
            <div class="box2" style="width: 300px;height: 300px;background-color: red;float : right;"></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>position：absolute、relative、fixed</title>

    <style>
        div{
            width:200px;
            height:200px;
            position:absolute;
            left:100px;   /*移动到距离最左100px的地方*/
            top:50px;     /*移动到距离最顶20px的地方*/
        }

        #div1{
            width:200px;
            height:200px;
            border:2px red solid;

            position:relative;
            left:100px;
            top:50px;
        }
       /*position:relation相对位置*/
        #box1{
            width:200px;
            height:200px;
            position:relative;  
            border:2px black solid;      
        }
        /* 定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。 */
        #box2{
            position:absolute;
            top:20px;
            left:30px;
            border:2px red solid;
        }
    </style>
</head>
<body>

    <!-- Position css里经常用到它，使html元素在网页中精确定位
        三种形式
        绝对定位(position: absolute)
        相对定位(position: relative)
        固定定位(position: fixed) 
    -->

    <!--position:absolute 如下面代码可以实现div元素(以一张200x200图片为例)相对于浏览器窗口向右移动100px，向下移动50px -->
    <div><img src="../img/2.jpg" alt=""></div>

    <!-- 相对定位 position:relative;     
        相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动， 
    -->

    <!-- 相对于以前位置向下移动50px，向右移动100px -->
    <div id="div1"></div>

    <!-- 固定定位 fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。
        由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化。就像那些培训网站一打开右下角那个聊天窗口就是固定定位
        position:fixed;（表示固定定位）
        但我们经常会把相对定位和绝对定位搭配使用：Relative与Absolute组合使用
        使用 position:absolute 可以实现被设置元素相对于浏览器（body）设置定位以后，
        然后元素相对于其它元素（如他的上一层）进行定位，使用 position:relative 来帮忙搞定 
    -->

    <!-- 参照定位的元素必须是相对定位元素的前辈元素 -->
    <div id="box1">爸爸
        <div id="box2">儿子
        </div>
    </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>样式3种引入方式  css选择器</title>

    <style>
        #div01{
            width: 50px;
            height: 50px;
            color: red;
        }
    </style>
    <link rel="stylesheet" href="../css/my.css">
    <!--链接css文件的代码-->
</head>
<body>

    <!-- 
        第一种：内部样式  直接写在head标签中 用sytle标签包裹 在style标签中书写样式：
			选择器{属性1:属性值1;属性2:属性值2;}	
		缺点：1、不能把HTML和CSS分开  2、不具备重用性
        
        第二种方式：行内样式：优先级最高
            在需要写样式的标签中通过style属性来书写：
            书写的方式：style="属性1:属性值1;..."
        第三种方式：外部样式表
            与内部样式表比较 优先级 看谁最后执行
            使用的时候，在HTML文件的head标签中引入
			通过link标签的href属性css文件的地址来引入
     -->

     <div id="div01">1</div>
     <div id="div02" style="width: 100px;height: 100px;background-color: grey;">2</div>
     <div id="div03">3</div>


     <!-- 
        id选择器 1、标签要有id  2、书写方式：#idName{	}
        元素选择器： 什么是元素：从开始标签到结束标签所涵盖所有内容
            书写方式：标签名{	}
            优先级：id选择器>元素选择器的
        类选择器:1、标签中有class属性  2、书写方式：.className{	}
            class命名规则：字母，下划线，后面接字母，下划线，短线，数字
            潜规则：多个单词用下划线或者短线连接
            如果需要给class属性添加多个class样式，空格添加
            例如：<div class="my-sytle my-font-size">01</div>
        通配符选择器：* 表示选择所有的元素
        优先级  行内样式>id选择器>类选择器>通配符选择器>元素选择器
      -->
    
</body>
</html>

其中hello.css为

#div03{
    width: 200px;
    height: 200px;
    background-color: aquamarine;
}

qq_41279327

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React --- css.html

以下是html和css代码<!DOCTYPE html><html ><head> <meta charset="UTF-8"> <title>Document</title></head><body> <!-- https://www.jb51.net/...
复制链接

扫一扫