web前端入门之html+css实例①

web前端之html+css实例①

去年之前学过一点web前端开发，过了一年，忘得差不多了，又想找一份前端的offer，努力从头复习一下，一起进步（ps：本科在校生），适合小白，大佬勿喷

以下相关实例均是最原始的版本，后续优化有想法会做了再发

一个热搜推荐

自己的思路：
1、四个div盒子，背景层一个，标题一个，书两个
2、css记得初始化重置，不然浏览器顶端会留空白，如
3、
第一个盒子大小颜色；
第二个盒子引入图和标题文字，设置宽高，布局左对齐；
第三个盒子设置宽高，引入图片文字分两列，图片边框，图片和文字之间的间隔，字体颜色，两个不同色按钮
第四个盒子同3，无按钮
问题所在：嵌套的盒子太多，很乱
参考思路：
背景*2，内外各1
html:

<div id="bg">
	<div id="bg1">
	</div>
</div>

css:

#bg {
	width: 1000px;
	height: 670px;
	background-image: url(../img/bg.gif);
	background-repeat: no-repeat;
}
#bg1{
	width: 745px;
	height: 505px;
	border: 1px solid #bfbfbf;
	position: relative;
	left: 115px;
	top: 52px;
	background-color: #fff;
}

内背景之内划分header和section1，section2（这样可以避免嵌套了太多盒子，看上去乱七八糟）
header部分：
图标+本周热搜
html：

<header>
	<img src="img/hot.gif">
	<h3>本周主打</h3>
</header>

css：

header {
	width: 686px;
	height: 36px;
	position: relative;
	left: 29px;
	top: 23px;
}

section1 部分：
上半部分的两本书籍，一个盒子div两个类book1，book2；book1中填充图片，设置浮动，文字部分分为标题h4和p部分，分别设置字号颜色，最后两个button1、button2，分别设置颜色位置，最后设置两本书之间的间隔；book2部分同理book1不再赘述
html：

<section class="section1">
	<div class="div book1">
		<img src="img/img1.gif">
		<h3>妙用性格</h3>
		<p>讲师： 张勤</p>
		<p>技术：共12集全</p>
		<p>类型： 生活</p>
		<P>性格无时无刻不存在</P>
		<button class="button1">购买</button>
		<button class="button2">预览</button>
	</div>
</section>

css

.section1{
	width: 684px;
	height: 180px;
	position: relative;
	left: 31px;
	top: 48px;
}
.div{
	width: 307px;
	height: 180px;
	float: left;
}
.div img{
	width: 128px;
	height: 180px;
	border: 1px solid #bfbfbf;
	float: left;
}
.div h3{
	font-size: 16px;
	line-height: 36px;
	color: #06b1da;
	position: relative;
	left: 20px;
	top: -10px;
}
.div p{
	font-size: 14px;
	line-height: 26px;
	color: #6a6a6a;
	position: relative;
	left: 20px;
	top: -10px;
}
.button1{
	width: 68px;
	height: 28px;
	color: #fff;
	outline: #00afda solid thin;
	border: 1px solid #6bcde4;
	background-color: #00afda;
	position: relative;
	left: 20px;
	top: 10px;
}
.book2{
    position: relative;
    left: 64px;
}

section2部分：
类比section1部分，一各盒子div2四本书四个类book3…book6，同理填充，无button。后设置div2的大小和位置，以及各部分之间的间隔
html：

<section class="section2">
	<div class="div2 book3">
		<img src="img/img3.gif">
		<h3>妙用性格</h3>
		<p>讲师： 张勤</p>
		<p>技术：共12集全</p>
		<p>类型： 生活</p>
	</div>
</section>

css:

.div2{
	width: 130px;
	height: 173px;
	float: left;
	margin-right: 9px;
}

完成
注：以上代码是部分截图，并不全，需自行补全；素材来自gitee，需要的也可以私信，一起进步

发现自己存在的问题：
1、太久没写html，几乎很多常识以及基本操作都快要忘记了，就像css布局的初始化等，需要尽快熟悉回来
2、关于html引用css和css调用html元素的问题，html引用css在head中link；css调html中的元素类用.块用#

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

#bg #bg1 .section1 .section2

3、边框细节