第一篇博客

自学CSS——用div制作一个十分简陋的页面
——入住优快云之后的第一篇博客

html代码奉上

<div id="header" align="center">
		<img src="timg1.jpg" width=48 top=10px>
		<span style="font-size: xx-large"> title </span>
		<p> <span style="font-size: x-large"> enter your name: </span>
			<input id="inputDemo" type="text" placeholder="输入姓名...">	
			<button type="button"> <span style="font-family: Comic Sans MS"> <b> login </b> </span> </button> </p>
	</div>

	<div id="lefter" align="center">
		<h2> <span style="font-size: large"> <b> MENU </b> </span> </h2>
		<ul>
			<li> <a href="firsthtml.html" target=_blank> HTML </a> </li>
			<li> <a href="firsthtml.html" target=_blank> CSS </a> </li>
			<li> <a href="firsthtml.html" target=_blank> JavaScript </a> </li>
		</ul>
	</div>

	<div id="container" align="center">
		<span style="font-size: large">
			container
		</span>
	</div>

	<div id="righter" align="center">
		<h2> <span style="font-size: large"> <b> MENU </b> </span> </h2>
		<ul>
			<li> <a href="firsthtml.html" target=_blank> Java </a> </li>
			<li> <a href="firsthtml.html" target=_blank> Cpp </a> </li>
			<li> <a href="firsthtml.html" target=_blank> Python </a> </li>
		</ul>
	</div>

	<div id="footer" align="center">
		footer
	</div>

CSS代码奉上

<style>
		*{
			font-family: Comic Sans MS;
		}
		#header, #footer{
			background-color: gray;
			color: white;
			width: 100%;
			height: 100px;
			/*clear: both; 清除两侧(both)的浮动元素*/
			float: left;
			border-radius: 20px;
		}
		#container{
			background-color: white;
			width: 80%;
			height: 800px;
			float: left;
			border-radius: 20px;
		}
		#lefter, #righter{
			background-color: lightgray;
			height: 800px;
			width: 10%;
			float: left;
			border-radius: 20px;
		}
		input[type=text]{
			padding: 5px;
			width: 100px;
			margin: 3px 1px;
			box-sizing: border-box;
			border: 1px solid #555;
			border-radius: 8px;
			outline: none;
			-webkit-transition: width 0.5s ease-in-out;
			transition: width 0.5s ease-in-out;
		}
		input[type=text]:focus{
			background-color: lightblue;
			width: 12%;
			border-radius: 5px;
		}
		img{
			position: absolute;
			top: 10px;
			left: 580px;
		}
		ul{
			list-style-type: none;
			padding: 0px;
		}
		li a{
			display: block;
			padding: 8px 16px;
			text-decoration: none;
		}
		li a:hover{
			background-color: white;
			font-size: large;
			font-weight: bold;
		}
	</style>

效果图：

心得体会：

开始学习html和css快半个月了，计划是html+css+js+jq–>vue，然后开始搞前端？
后端的知识目前已经学了java和MySQL，但是还不精通。 之后要开始练习前后端的交互，努力成为一个可前可后的优秀程序员！