对于新手开始着手于写web前端的代码往往会出现一些常见的问题，比如字符不正确，相对位置的设置，颜色设置代码等等，都需要一套较为完整的学习方式才能实现熟练掌握web代码的书写，下面展示一个自己写的书店首页代码，有一些css外联的功能，文本内容可以更换。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>叮叮书店</title>
<meta name="keywords" content="网上书店,IT图书,前端技术">
<meta name="description" content="叮叮书店是一个主要销售IT图书的垂直网站">
<meta name="robots" content="index,follow">
<link href="style.css" rel="stylesheet">
</head>
<body>
<!--页眉-->
<header class="container">
<!--网站logo-->
<div id="logo">
<a href="index.html"><h1>叮叮书店</h1></a>
</div>
<!--站内搜索-->
<div id="search">
<form action="index.html" method="get">
<input type="search" placeholder="站内搜索"><input type="submit" value="搜索">
</form>
</div>
</header>
<!--导航菜单-->
<div id="nav">
<nav class="container">
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="category.html">书籍分类</a></li>
<li><a href="specials.html">特刊降价</a></li>
<li><a href="contact.html">联系我们</a></li>
<li><a href="about.html">关于我们</a></li>
</ul>
<!--购物车-->
<div id="cart">
<span class="icon-cart"></span>
<a href="cart.html">购物车</a>
</div>
</nav>
</div>
<!--内容-->
<div id="content-wrapper" class="container">
<!--左边内容区-->
<main>
<!--横幅广告-->
<div id="adv"></div>
<!--本周推荐-->
<section id="recommend">
<span class="icon-book"></span>
<h2>本周推荐</h2>
<section class="recommend-book">
<h3>《HTML5权威指南》</h3>
<div class="content">
<div class="cover">
<a href="#"><img src="images/prod2.jpg" alt="HTML5权威指南"></a>
</div>
<div class="description">
<p>作为下一代Web标准，
<mark>HTML5</mark>
致力于为互联网开发者搭建更加便捷、开放的沟通平台。业界普遍认为，在未来几年内，
<mark>HTML5</mark>
无疑将成为移动互联网领域的主宰者。本书是系统学习网页设计和移动设计的参考图书。
</p>
<p>Adam Freeman，曾在多家名企担任高级职务，现为畅销技术图书作家，著有多部C#、.NET和Java方面的大部头作品。其中《ASP.NET
4高级程序设计（第4版）》、《精通ASP.NET
MVC
3框架（第3版）》销量均在同品种中名列前茅，备受读者推崇。Freeman专门为网页开发新手和网页设计师打造的经典参考书，这本书秉承作者的一贯风格，幽默风趣、简约凝练、逻辑性强，是广大Web开发人员的必读经典。</p>
</div>
</div>
<div class="cart-more"><a class="cart" href="cart.html">加入购物车</a>
<a class="more" href="details.html">详细内容</a></div>
</section>
<section class="recommend-book">
<h3>《JavaScript权威指南》</h3>
<div class="content">
<div class="cover">
<a href="#"><img src="images/prod3.jpg" alt="JavaScript权威指南"></a>
</div>
<div class="description">
<p>经典的JavaScript工具书，从1996年以来，本书已经成为JavaScript程序员心中的《圣经》。</p>
<p>David Flanagan，是一名程序员，也是一名作家 。他在O’Reilly出版的其他畅销书还包括《JavaScript Pocket Reference》、《The Ruby
Programming Language》、以及《Java in a
Nutshell》。David毕业于麻省理工学院，获得计算机科学与工程学位。他和妻子和孩子一起生活在西雅图和温哥华之间的美国太平洋西北海岸。</p>
</div>
</div>
<div class="cart-more"><a class="cart" href="cart.html">加入购物车</a>
<a class="more" href="details.html">详细内容</a></div>
</section>
</section>
<!--最近新书-->
<section id="new">
<span class="icon-new"></span>
<h2>最近新书</h2>
<div class="content">
<section class="book">
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
