HTML和CSS学习第一天

最新推荐文章于 2022-01-14 14:46:09 发布

guoyebing

最新推荐文章于 2022-01-14 14:46:09 发布

阅读量332

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/lushizhuo9655/article/details/106186959

版权

前端学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

注意：这个只是对HTML的补充，入门看这个https://blog.csdn.net/lushizhuo9655/article/details/97532327

锚点定位：<a href="#live">点击这个</a>

要到那里去就在对应的地方写<span id="live"></span>

base标签：base可以设置整体链接的打开状态 <base target="_blank" />

版权： © ©

自定义列表

定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
</dl>

表格标题

<table>
    <caption>我是表格标题</caption>
</table>

图片提交按钮

label 标签

绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点

<label>用户名：<input type="text"></label>
<!--label可以写在里面或者外面都可以-->
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">

多类名选择器 class=“类名选择器1 类名选择器2”

<style>
.one{
 color:red;
}
.two{
 font-size: 100px;
 }
</style>

<div class="one two">张三1</div>

CSS字体样式属性

font-size：字号大小 p{font-size:16px}

font-family：字体（可以同时指定多个字体，中间用逗号隔开，表示浏览器不支持第一个就会一直找下去，直到找到合适的）

p{font-family:"微软雅黑"，Arial} 中文字体需要加英文状态下的引号，英文字体一般不需要加引号

font-weight：字体是否加粗正常：normal 加粗：blod p{font-weight:normal}

color：十六进制

#f00：红色

#000：黑色

#fff：白色

后代选择器：ul li

子代选择器：ul>li

并集选择器：div,p,span{color:red} 并集选择器用逗号隔开，代表和

伪类选择器：（顺序不能颠倒lvha 特殊记忆love hate） a:link {}

:link 未访问的链接

:visited 已访问的链接

:hover 鼠标移动时候

:active 鼠标按上未松开

鼠标放上去换背景图片

a:hover{

background-image:url(images/1.jpg);

}

背景图片位置

div{

width:500px;

height:500px;

background-color:red;

background-image:url(image/1.jpg);(默认是平铺所有的)

background-repeat：no-repeat；

//background-position： x y top 上 bottom 下 left 左 right 右 x可以设置左右 y可以设置上下

如：background-position：center center;

background-position：left; 如果只写了一个，另一个默认就是居中的

background-position：50px 12px position后面可以跟值px x在前y在后

background-attachment：scroll（背景图像滚动） fixed （背景图像固定）

}

背景半透明 background：rgba(0,0,0,0.3) red green blue alpha(0~1)

边框：border solid：实线 dashed：虚线

div{ 1px solid red}

可以将盒子模型拆开

div{

width：200px；

height：200px；

border-top：1px solid red；

border-bottom：2px solid green；

border-left：3px dashed blue；

border-right：1px solid pink；

}

ps使用：

如何放大和缩小图片在ps中 Ctrl和+表示放大 Ctrl和-表示缩小

如何改变图片在ps中单位是厘米，变成像素步骤：编辑--首选项--单位与标尺，然后修改标尺即可。

如何量长度：通过这个矩形选框工具即可量长度

清除内外边距：

* {
       margin: 0;
       padding: 0;
   }

首行缩进2个：text-indent: 2em;

取消li 前面的小点：

li {
list-style: none;
}

盒子水平居中对齐 ：margin：0 auto；

div{

text-align:center; //可以让盒子内容（文字行内元素行内块元素）居中对齐

margin：0 auto； //通俗写法 0 atuo 上下是0 左右是auto 自动水平居中对齐

}

圆角边框（CSS3） border-radius：50% 让一个正方形变成圆圈

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
       div{
           width: 300px;
           height: 300px;
           background-color: pink;
           margin: 100px auto;
           border-radius: 50%;
       }
    
	</style>
</head>
<body>
  <div>
  </div>
</body>
</html>

盒子阴影（CSS3）前两个属性必须写，后面的可以省略 rgba表示半透明

box-shadow:水平阴影垂直阴影模糊距离（虚实）阴影尺寸（影子大小）阴影颜色

div{

width：200px;

height:200px;

box-shadow: 0 15px 30px rgba(0,0,0,0.3)

}

div：hover{ /*表示鼠标经过div时候的样子*/

box-shadow：0 15px 30px rgba(0,0,0,0.3)

}

ps使用：

ctrl+r 显示隐藏标尺 右击标尺---把里面的单位一律改为像素

按住空格键，变成手的图标就可以随便拖拽

Ctrl+d：取消选区

怎么拖一根线出来：先点击移动工具 怎么将线放回去：一样的操作，也是先点击移动工具，然后将出来的线放回去就可以了

如果拖了许多的线出来，我们可以批量删除

切图：

如何获取页面中的文字颜色

如何取消切图：

点击对应的切图，然后delete即可。

如果有许多切图，我们可以批量删除

怎么隐藏图层中不需要的东西：点击你要隐藏的图片

撤销：Ctrl+Z

如何将一个图片上的多个图层导出自己想要的图层

选中你要导出的图层

做背景图片：

.banner {

height: 620px;

background: url(../images/banner.jpg) no-repeat top center;

}

练习一：使用锚点定位

<html>
    <head>
        <title></title>
    </head>
    <body>
       <p id="top">个人介绍</p>
       <p>学习背景</p>
       <a href="#tiao"><p>外貌特征</p></a>
       <p>个人爱好</p>
       <p>喜欢的游戏</p>


        <p>本人出生于1995年3月</p>
        <p>本人出生于1995年3月</p>
        <p>本人出生于1995年3月</p>
        <p>本人出生于1995年3月</p>
        <p>本人出生于1995年3月</p>
        <p>本人出生于1995年3月</p>
        <p>本人出生于1995年3月</p>
        <p>本人出生于1995年3月</p>
        <p>本人出生于1995年3月</p>
        <p>本人出生于1995年3月</p>
        <p>本人出生于1995年3月</p>
        <p>本人出生于1995年3月</p>
        <p>毕业于一个不知名的大学</p>
        <p>毕业于一个不知名的大学</p>
        <p>毕业于一个不知名的大学</p>
        <p>毕业于一个不知名的大学</p>
        <p>毕业于一个不知名的大学</p>
        <p>毕业于一个不知名的大学</p>
        <p>毕业于一个不知名的大学</p>
        <p>毕业于一个不知名的大学</p>
        <p>毕业于一个不知名的大学</p>
        <p>毕业于一个不知名的大学</p>
        <p>毕业于一个不知名的大学</p>
        <p>毕业于一个不知名的大学</p>
        <p>毕业于一个不知名的大学</p>
        <p>毕业于一个不知名的大学</p>
        <p>毕业于一个不知名的大学</p>
        <p id="tiao">身高184，体重130</p>

        <p>喜欢躺在床上，能坐着绝对不站着，能躺着绝对不坐着</p>

        <p>喜欢英雄联盟 王者荣耀</p>
        <a href="#top"><input type="button" value="回顶部"></a>
    </body>
</html>

练习二：a标签都打开新的页面

<html>
    <head>
        <title></title>
        <base target="_blank">
    </head>
    <body>
      <a href="http://www.baidu.com">百度</a>
      <a href="http://www.sina.com">新浪</a>
      <a href="http://www.sohu.com">搜狐</a>
      <a href="http://www.163.com">网易</a>
        
    </body>
</html>

练习三：通过label获取标签

<html>
    <head>
        <title></title>
        <base target="_blank">
    </head>
    <body>
     <label>
         用户名：<input type="text">
     </label>
        
     <hr>
     <label for="btn">
        用户名：<input type="text">
        密码：<input type="password" id="btn">
     </label>
     <hr>

     <label for="btn2">
         234
     </label>
     用户名：<input type="text">
     密码：<input type="password" id="btn2">

    </body>
</html>

练习四：伪类选择器的几种情况

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>伪类选择器</title>
	<style>
	a:link {  /* 未访问过的连接状态*/
		color: #3c3c3c;
		font-size: 25px;
		text-decoration: none;  /*取消下划线*/
		font-weight: 700;
	}
	a:visited {  /*这个链接我们已经点过的样子  已访问过链接*/

		color: orange;

	}
	a:hover {  /*鼠标经过连接时候的样子*/
		color: #f10215;
	}
	a:active {  /*鼠标按下时候的样子*/
		color: green;

	}

	</style>
</head>
<body>
	<a href="http://www.baidu.com">秒杀</a>
</body>
</html>

练习五：背景半透明

<html>
    <head>
        <title></title>
        <style>
            body{
                background-color: pink;
            }
            div{
                width: 200px;
                height: 200px;
                color: #fff;
                /* background: rgba(0,0,0,0.3); 这个0可以省略 */
                background: rgba(0,0,0,.3);
            }
        </style>
    </head>
    <body>
            <div>
                我是文字内容
            </div>
    </body>
</html>

练习六：修改原来的边框样式

<html>
    <head>
        <title></title>
        <style>
           input{
               border: 0;
               border-bottom: 1px dashed red;
           }
           button{
               width: 50px;
               height: 25px;
               border: 1px solid red;
           }
        </style>
    </head>
    <body>
            <div>
               用户名：<input type="text"><br>
               <button>登录</button>
            </div>
    </body>
</html>

练习七：新浪导航栏（去官网截图，然后到ps里面测长度和高度和背景颜色）

<html>
    <head>
        <title></title>
        <style>
          .nav{
            height: 48px;  /* 高度 */
            border-top: 3px solid #FF8500;  /*上边框是 3像素*/  
		    border-bottom: 1px solid #EDEEF0; /*下边框是 1像素*/
            background-color: #FCFCFC; /*背景颜色*/
          }
          .nav a{   /*  鼠标正常的状态 */
            height: 48px;
             text-decoration: none;
             line-height: 48px; /* 垂直居中  行高等于高 */
             display: inline-block;    /*转换 */
             color: #4c4c4c;
           /* padding-left: 18px;
            padding-right: 18px;   可以写成下面这个*/
            padding: 0 18px;
            font-size: 14px;
          }
          .nav a:hover{
            background-color: #edeef0;
		    color: #ff8400;
          }
        </style>
    </head>
    <body>
            <div>
              <div class="nav">
                <a href="#">张三</a>
                <a href="#">小李四</a>
                <a href="#">我是菜鸟</a>
                <a href="#">我真是菜鸟</a>
              </div>
                
            </div>
    </body>
</html>

练习八：最外面是300*300，里面是100*100

<html>
    <head>
        <title></title>
        <style>
          /*  一般写下面这个 只需要考虑左边和上边
            .div1{
                width: 100px;
                height: 100px;
                background-color:green; 
                 padding: 100px;  
            }*/

            .div1{
                width: 200px;
                height: 200px;
                background-color:green; 
                padding-left: 100px;
                padding-top: 100px;
            }

            .div1 div{
                width: 100px;
                height: 100px;
                background-color:red;
               
            }
        </style>
    </head>
    <body>
        <div class="div1">
              <div>
              </div>  
        </div>
    </body>
</html>

练习九：写一个新闻列表

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	* {
		margin: 0;
		padding: 0;  /*清除内外边距*/
	}
	body {
		background-color: #eee;
	}
	.article {
		width: 380px;
		height: 263px;
		border: 1px solid #ccc;
		margin: 100px;
		padding: 20px 15px 0;  /*上 20  左右  15  下  0*/
	}
	.article h4 {
		color: #202026;
		font-size: 20px;
		border-bottom: 1px solid #ccc;
		padding-bottom: 5px;
		/*margin-bottom: 12px;*/
	}
	li {
		list-style: none;   /*取消li 前面的小点*/
	}
	.article ul li {
		height: 38px;
		line-height: 38px;
		border-bottom: 1px dashed #ccc; /* 1像素的虚线边框*/
		text-indent: 2em;
	}
	.article  a  {
		font-size: 12px;
		color: #333;
		text-decoration: none;
	}
	.article a:hover {
		text-decoration: underline;  /*添加下划线*/
	}
	.article ul {
		margin-top: 12px;
	}
	</style>
</head>
<body>
  <div class="article">
  		<h4>最新文章/New Articles</h4>
  		<ul>
  			<li><a href="#">北京招聘网页设计，平面设计，php</a></li>
  			<li><a href="#">体验javascript的魅力</a></li>
  			<li><a href="#">jquery世界来临</a></li>
  			<li><a href="#">网页设计师的梦想</a></li>
  			<li><a href="#">jquery中的链式编程是什么</a></li>
  		</ul>
  </div>
</body>
</html>

练习十：圆角案例

<html>
    <head>
		<title></title>
		<style>
			body{
				background-color:#ccc;
			}

			.radius a{
				width: 170px;
				height: 170px;
				background-color: #fff;
				display: inline-block;
				border-radius: 50%;
				text-decoration: none;
				border: 1px solid white;
				text-align: center;
				line-height: 170px;
				margin: 30px;
				color: red;
	   			font-weight: 700; 

			}
			.radius a:hover{
				background-color: #f00;
				color: #fff;
			}
		</style>
    </head>
    <body>
	<div class="radius">
		<a href="#">文字内容</a>
		<a href="#">文字内容</a>
		<a href="#">文字内容</a>
		<a href="#">文字内容</a>
	</div>

	</body>
</html>

练习十一：布局与版心（一列固定宽度且居中）

<html>
    <head>
		<title></title>
		<style>
			.one,
			.two,
			.three,
			.four{
				background-color: #eee;
				width: 960px;
				border: 1px dashed #ccc;
				margin: 0 auto;
			}
			.one{
				height: 80px;
			}

			.two{
				height: 300px;
				margin: 5px  auto;
			}

			.three{
				height: 200px;
			}

			.four{
				height: 80px;
				margin: 5px auto 0;
			}
			
		</style>
    </head>
    <body>
		<div class="one"></div>
		<div class="two"></div>
		<div class="three"></div>
		<div class="four"></div>
	</body>
</html>

练习十二：左右型布局

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.top {
		width: 900px;
		height: 60px;
		background-color: pink;
		margin: 0 auto;
	}
	.banner {
		width: 900px;
		height: 100px;
		background-color: purple;
		margin: 0 auto;
	}
	.main {
		width: 900px;
		height: 350px;
		background-color: skyblue;
		margin: 0 auto;
	}

	.left {
		width: 288px;
		height: 350px;
		background-color: yellow;
		float: left;
		border: 1px solid red;
	}
	.right {
		width: 600px;
		height: 350px;
		background-color: deeppink;
		float: right;
		
	}
	.footer {
		width: 900px;
		height: 60px;
		background-color: green;
		margin: 0 auto;
	}

	</style>
</head>
<body>
	<div class="top"></div>
	<div class="banner"></div>
	<div class="main">
		<div class="left">left</div>
		<div class="right">right</div>
	</div>
	<div class="footer"></div>
</body>
</html>

练习十三：通栏结构

<html>
    <head>
        <title></title>
        <style>
            * {
            margin: 0;
            padding: 0;
	        }
            .top{
                height: 20px;
                background-color: red;
            }
            .top_inner{
                width: 960px;
                height: 20px;
                background-color: green;
                margin: 0 auto;
            }
            li{
                list-style: none;
            }
            .banner{
                width: 960px;
                height: 20px;
                margin: 0 auto;
            }

            .banner li {
                float: left;
                width: 230px;
                height: 20px;
                margin-right: 10px;
            }

           .one{
                float: left;
                width: 240px;
                height: 20px;
                background-color: pink;
               
            }
            .two{
                float: left;
                width: 240px;
                height: 20px;
                background-color: skyblue;
            }
            .three{
                float: left;
                width: 240px;
                height: 20px;
                background-color: yellowgreen;
            }
            .banner .four{
                float: left;
                width: 240px;
                height: 20px;
                background-color: hotpink;
                 margin-right: 0px;
            }

            .main {
                width: 960px;
                height: 200px;
                background-color: skyblue;
                margin: 0 auto;
	        }

            .left {
                width: 308px;
                height: 200px;
                background-color: yellow;
                float: left;
                border: 1px solid red;
                margin-right:10px; 
            }
            .right {
                width: 640px;
                height: 200px;
                background-color: deeppink;
                float: right;
                
            }
            .footer{
                height: 20px;
                background-color: red;
            }
            .footer_inner{
                width: 960px;
                height: 20px;
                background-color: green;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <div class="top">
            <div class="top_inner">123</div>
        </div>
        <div class="banner">
            <ul>
                <li class="one">1</li>
                <li class="two">2</li>
                <li class="three">3</li>
                <li class="four">4</li>
            </ul>

        </div>
        <div class="main">
            <div class="left"></div>
            <div class="right"></div>
        </div>
        <div class="footer">
                <div class="footer_inner">123</div>
        </div>


    </body>
</html>

练习十四：网站首页

//index.css
/* 先删除默认的内外边距 */
*{
    margin: 0;
    padding: 0;
}

body {
	background-color: #fafafa;
	height: 3000px;
}
/*  取消li 的小点 */
li{
    list-style: none;
}
/* 顶部导航栏开始啦 */
.header {
	height: 100px;
	background-color: #fff;
}

.header_inner{
    width: 1200px;
    margin: 0 auto;
    height: 100px;
    line-height: 100px;
}
.logo{
    float: left;
}

.nav{
    float: right;
}

.nav li  {
	float: left;
	margin: 0 20px;
}

.nav li a {
	color: #333;
	text-decoration: none;
}

.nav li a:hover {
	color: #2288f6;
}

/* banner STAR */
.banner {
	height: 620px;
	background: url(../images/banner.jpg) no-repeat top center;
}
/* banner end */

.service {
	/* margin-top: 75px; */
	width: 1055px;
	height: 660px;
	/* background-color: pink; */
	margin: 75px auto 0;
}
.service-hd {
	border-top: 1px solid #ccc;
	margin: 0 25px;
}
.service-hd h3 {
	width: 167px;
	height: 46px;
	margin: -15px auto 0;
	
}
.service-hd p {
	font-size: 12px;
	color: #666;
	line-height: 26px;
	text-align: center;
	width: 830px;
	margin: 15px  auto 0;


}

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>云道首页</title>
	<!-- 引入外面的css文件 -->
	<link rel="stylesheet" href="css/index.css" />
</head>
    <body>
        <div class="header">
            <div class="header_inner">
                <div class="logo">
                    <img src="./images/logo.png">
                </div>
                <div class="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>
                    </ul>
                </div>
            </div>
        </div>
<!-- 顶部导航栏结束啦 -->
         <!-- banner star -->

   <div class="banner">
   
    </div>
    <!-- banner end -->
 <!-- 我们服务模块 -->
   <div class="service">
   		<div class="service-hd">
   			<h3>
   				<img src="images/ser.png">
   			</h3>
   			<p>shopcmd云道，国内领先的独立电商解决方案及全渠道营销平台。完整的产品体系，简约的系统，个性化前端，全覆盖多渠道营销体系...
我们致力于打造一个服务于品牌商城/独立电商的完整生态，让企业的独立电商之路变得更简单，也更有价值！</p>
   		</div>
   		
   </div>

    </body>
</html>