web前端入门之html（11）
网上书城案例简单实现
1.前期准备：
- 划分图片结构，分成7个部分，然后一个模块一个模块实现
- 查看网页上的图标，哪些是需要自己准备的（推荐阿里巴巴矢量库）
- 图标的大小，格式，路径，颜色等都要注意
- 网页上的图片和html的文件路径最好放在一个文件夹下
- 颜色搭配，可以用ps，axture等软件复制原来的图片颜色
2.代码：
<!DOCTYPE html>
<!-- saved from url=(0092)file:///C:/Users/Administrator/Desktop/sublime%E7%BB%83%E4%B9%A0/csdn%E7%BB%83%E4%B9%A0.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<div id="page">
<div id="top">
<!-- table标签指定宽度 -->
<table width="100%">
<tr>
<td width="70%"><img src="1.png" width="199" height="46"></td>
<td align="right">
<img alt="" src="购物车.png" width="25" height="25" align="center">
<a>购物车</a>|<a>帮助中心</a>|<a>我的帐户</a>|<a>新用户注册</a>
</td>
</tr>
</table>
</div>
<div id="menu">
<table width="100%" bgcolor="#D52C27">
<tr align="center">
<td><a><font size=4 color="white">文化</font></a></td>
<td><a><font size=4 color="white">生活</font></a></td>
<td><a><font size=4 color="white">计算机</font></a></td>
<td><a><font size=4 color="white">外语</font></a></td>
<td><a><font size=4 color="white">经营</font></a></td>
<td><a><font size=4 color="white">励志</font></a></td>
<td><a><font size=4 color="white">社科</font></a></td>
<td><a><font size=4 color="white">学术</font></a></td>
<td><a><font size=4 color="white">少儿</font></a></td>
<td><a><font size=4 color="white">艺术</font></a></td>
<td><a><font size=4 color="white">原版</font></a></td>
<td><a><font size=4 color="white">科技</font></a></td>
<td><a><font size=4 color="white">考试</font></a></td>
<td><a><font size=4 color="white">全部商品</font></a></td>
</tr>
</table>
</div>
<div id="search">
<table width="100%" bgcolor="#B4B486">
<tr>
<td align="right">
sesrch
<input type="text">
<input type="button" value="搜索">
</td>
</tr>
</table>
</div>
<div id="content">
<div>
<h1>商品目录</h1>
<hr/>
<h1>计算机类</h1>
<h5>共**几种商品</h6>
<hr/>
</div>
<div>
<table width="100%" bgcolor="#C4BD90">
<tr align="left">
<td><font size=10 color="white">PRODUCT LIST</font></td>
</tr>
</table>
</div>
<div>
<table width="100%">
<tr width="100%">
<td align="center">
<div ><img width=212 hight=257 src="杀死一只知更鸟.jpg"></div>
<span>书名：《杀死一只知更鸟》</span><br>
<span>价格：23.66元</span>
</td>
<td align="center">
<div><img width=212 hight=257 src="飘.jpg"></div>
<span>书名：《飘》</span><br>
<span>价格：47.00元</span>
</td>
<td align="center">
<div ><img width=212 hight=257 src="呼啸山庄.jpg"></div>
<span>书名：《呼啸山庄》</span><br>
<span>价格：32.50元</span>
</td>
<td align="center">
<div ><img width=212 hight=257 src="安娜·卡列尼娜.jpg"></div>
<span>书名：《安娜·卡列尼娜》</span><br>
<span>价格：27.90元</span>
</td>
</tr>
<tr width="100%">
<td align="center">
<div><img width=212 hight=257 src="茶花女.jpg"></div>
<span>书名：《茶花女》</span><br>
<span>价格：22.00元</span>
</td>
<td align="center">
<div><img width=212 hight=257 src="简·爱.jpg"></div>
<span>书名：《简·爱》</span><br>
<span>价格：18.88元</span>
</td>
<td align="center">
<div ><img width=212 hight=257 src="红与黑.jpg"></div>
<span>书名：《红与黑》</span><br>
<span>价格：23.00元</span>
</td>
<td align="center">
<div ><img width=212 hight=257 src="包法利夫人.jpg"></div>
<span>书名：《包法利夫人》</span><br>
<span>价格：34.50元</span>
</td>
</tr>
</table>
</div>
<div id="foot">
<table bgcolor="#EFEEDC" width="100%">
<tr>
<td rowspan="2" width="50%" align="center">
<img align="center" src="1.png">
</td>
<td>联系我们</td>
</tr>
<tr>
<td>copyright 2008 @ BookStore ALL Right</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
3.截图对比
电脑长截图：ctrl+m，然后把文件后缀名改成图片格式
拉到ps里对比大小，颜色等
扫一扫
1588
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
