WEB前端IDE的使用以及CSS的应用

IDE的使用

DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Documenttitle>
	head>
	<body>
		<ol>
			
			
			
			
			
			
			<li style="border:1px solid red">子项1li>
			<li style="border:1px solid red">子项2li>
			<li style="border:1px solid red">子项3li>
			<li style="border:1px solid red">子项4li>
			<li style="border:1px solid red">子项5li>
			<li style="border:1px solid red">子项6li>
			<li style="border:1px solid red">子项7li>
			<li style="border:1px solid red">子项8li>
			<li style="border:1px solid red">子项9li>
		ol>
	body>
html>

表单标签

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	
	<body>
		
		
		
		
		
		
		
		
		
		
		
		
		
		<form action="#" method="get" enctype="text/plain">
			
			
			
			
			
			
			
			
			
			
			用户名:<input type="text" name="username"  maxlength="6" placeholder="请输入你的用户名"> <br>
			
			密  码:<input type="password" name="password" value="11111"/><br>
			
			爱  好:<input type="checkbox" name="fav" value="bk" checked>篮球
			<input type="checkbox" name="fav" value="sing" checked><input type="checkbox" name="fav" value="jump" checked><input type="checkbox" name="fav" value="rap" checked>Rap <br>
			
			
			性  别:<input type="radio" name="sex" value=""><input type="radio" name="sex" value=""><input type="radio" name="sex" value="跨性别" checked>跨性别 <br>
			
			邮  箱:<input type="email" name="email" autofocus/>
			
			<input type="submit">
			
			<button>上传button>
			
			<input type="file" name="avarta">
			
			<div style="width: 100px;height: 100px;">div>
			
			<input type="reset" >
			
			<input type="image" name="avarta" src="img/button.jpg" width="250px" height="100px">
			
			<input type="hidden" name="location" value="西安">
			
			
			
			
			<input type="color">
			
			<input type="date">
			
			<input type="datetime-local">
			
			<input type="time" name="" id="">
			
			<input type="url">
			
			<input type="range" max="100" min="20">
		form>
	body>
html>

CSS 部分

css层叠样式表(cascading style sheet)

  • 外链样式的好处
    • 首先提高代码的复用性
    • 他可以降低代码的耦合性
DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		
		<style type="text/css">
			div{
				width: 100px;
				height: 200px;
				background-color: black;
			}
			/*  第四种方式 @import */
			@import url("css/new_file.css");
		style>
		
		
	head>
	<body>
		
		
		<div>div>
		<span>span>
	body>
html>

基本选择器

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style>
			
			/* 优先级关系 id > class > 标签 > *       */
			/* 通配符选择器:一般用于重置页面样式 */
			*{
				/* 间距 */
				margin: 0px;
				/* 边距 */
				padding: 0px;
				
				background-color: black;
			}
			
			/* id选择器 :对指定id的标签进行样式修整*/
			#first_div{
				width: 200px;
				height: 200px;
				border: 1px dotted red;
			}
			
			/* 类选择器:对引用该类的标签使用样式 */
			.div_class{
				width : 300px;
				height: 300px;
				background-color: aqua;
			}
			
			/* 标签选择器 :作用于页面中所用相同的标签*/
			div{
				width: 100px;
				height: 100px;
				border:1px solid rebeccapurple;
			}
			
		style>
	head>
	<body>
		<div id="first_div">div>
		<div class="div_class">div>
		<div class="div_class">div>
	body>
html>

包含选择器

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<style>
			/* 逗号选择器,可以将样式代码赋给多个选择器,选择器种类任意 */
			div,.span_class,p{
				padding: 10px;
				background-color: aqua;
				border: 1px dashed firebrick;
			}
			/* 子代选择器 */
		/* 	ul > li{
				border: 1px solid red;
			} */
			/* 后代选择器 */
			ul  li{
				border: 1px solid red;
			}
			
		style>
	head>
	<body>
		<ul>
			<li>子项1li>
			<li>子项2li>
			<li>子项3li>
			<li>
				<ol>
					<li>子项的子项1li>
					<li>子项的子项2li>
					<li>子项的子项3li>
					<li>子项的子项4li>
				ol>
			li>
		ul>
	body>
html>

你可能感兴趣的:(前端,ide,css)