当前位置: 开发笔记 > 前端 > 正文

处女作——静态页面的编写

作者：泉水叮咚139 | 来源：互联网 | 2023-07-21 11:08

商城商品管理页面（静态页面）1.头部导航条2.菜单列表3.搜索选项4.热门搜索5.商品列表（图片，价格，购买按钮）<!DOCTYPEhtml&

商城商品管理页面（静态页面）
1. 头部导航条
2. 菜单列表
3. 搜索选项
4. 热门搜索
5. 商品列表（图片，价格，购买按钮）

alt="乐美美"/>
<a href="#" class="skip">
<img src="images/skip.gif" alt="双十一会场"/>
a>
<div class="search-hot">
<div class="search">
<form action="#" class="f1">
<input type="text" name="block1" value="惊喜狂欢周，满10000立减1000>>>"/>
<input type="submit" name="block2" value="搜索"/>
form>
div>
<div class="hot">
<span href="#" class="hd hid">热门搜索:span>
<a href="#" class="hd">欧式家具a>
<a href="#" class="hd">实木家具a>
<a href="#" class="hd">美式家具a>
div>
div>
div>
div>
<div class="navigator-index">
<div class="content">
<h2>商品分类h2>
<a href="#" class="choice">家具城a>
<a href="#" class="choice">建材城a>
<a href="#" class="choice">家居家饰a>
<a href="#" class="choice">团购a>
<a href="#" class="choice">晒家a>
<a href="#" class="choice">装修网a>
<a href="#" class="choice">图览家居a>
div>
div>
<div class="main-page">
<div class="goods">
<div class="title">菜单列表div>
<ul class="lis">
<li>
<a href="#">中式家具a>
<a href="#">欧式家具a>
<a href="#">欧式家具a>
<a href="#">现代家具a>
<a href="#">古典家具a>
<a href="#">法式家具a>
<a href="#">简美家具a>
<a href="#">韩式家具a>
<a href="#">北欧家具a>
<a href="#">地中海家具a>
li>
<br/>
<br/>
<li>
<a href="#">卧室家具a>
<a href="#">客厅家具a>
<a href="#">户外家具a>
<a href="#">书房家具a>
<a href="#">特价家具a>
<a href="#">特价衣柜a>
<a href="#">餐厅家具a>
<a href="#">实木衣柜a>
<a href="#">儿童房家具a>
<a href="#">双人床a>
li>
<br/>
<br/>
<li >
<a href="#">实木家具a>
<a href="#">松木家具a>
<a href="#">红木家具a>
<a href="#">真皮家具a>
<a href="#">布艺家具a>
<a href="#">板式家具a>
<a href="#">乳胶床垫a>
<a href="#">藤艺家具a>
<a href="#">大理石a>
<a href="#">不锈钢a>
li>
ul>
div>
<img src="images/pic.jpg" alt="加载失败"/>
<div class="pic">
<ul>
<li>
<div class="box">
<img src="images/goods1.jpg" alt="加载失败"/>
<p>$2000 <a href="#">去看看a>p>
div>
<div class="box">
<img src="images/goods2.jpg" alt="加载失败"/>
<p>$2300 <a href="#">去看看a>p>
div>
<div class="box">
<img src="images/goods3.jpg" alt="加载失败"/>
<p>$2200 <a href="#">去看看a>p>
div>
<div class="box">
<img src="images/goods4.jpg" alt="加载失败"/>
<p>$2500 <a href="#">去看看a>p>
div>
li>
<li>
<div class="box">
<img src="images/goods5.jpg" alt="加载失败"/>
<p>$2600 <a href="#">去看看a>p>
div>
<div class="box">
<img src="images/goods6.jpg" alt="加载失败"/>
<p>$3500 <a href="#">去看看a>p>
div>
<div class="box">
<img src="images/goods7.jpg" alt="加载失败"/>
<p>$4800 <a href="#">去看看a>p>
div>
<div class="box">
<img src="images/goods8.jpg" alt="加载失败"/>
<p>$5000 <a href="#">去看看a>p>
div>
li>
ul>
div>
div>

body>
html>html代码

;
position: relative;
}
div.goods{
display: inline-block;
width: 402px;
height: 354px;
background-color: lavenderblush;
margin-left: 358px;
overflow: hidden;
}
div.goods .title{
text-align: center;
line-height: 50px;
font-size: 22px;
color: #ffffff;
background-color: black;
height: 50px;
}
ul a{
margin-left: 8px;
}
.main-page .pic{
width: 1188px;
height: 614px;
margin-left: auto;
margin-right: auto;
padding-top: 10px;
}
.box{
display: inline-block;
width: 280px;
height: 240px;
text-align: center;
overflow: hidden;
margin-top: 20px;
font-size: 18px;
margin-left: 10px;
background-color: red;
}
.box p a{
color: red;
font-size: 25px;
background-color: yellow;
}
.box p a:hover{
color: blue;
}css代码