用css+div编写的商城页面

最新推荐文章于 2024-06-30 00:15:00 发布
最新推荐文章于 2024-06-30 00:15:00 发布
阅读量1.4k 收藏 4
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fnwibwj/article/details/79761445
版权 
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>首页</title>
  <style>
   #i{
    margin: 0 450px 0 450px ;
   }
   #l{
    margin: 10px 550px 0 550px;
   }
   #main{
    border: 1px solid black;
    width: 1500px;
    height: 2500px;
   }
   #a{
    border: 1px solid black;
    width: 1498px;
    height: 70px;
    margin: 1px 2px 0;
   }
   #a1{
   
    width: 150px;
    height:70px;
    background: url(logo.gif) no-repeat;
    float: left;
   }
   #a2{
    width: 350px;
    height:70px;
    background: url(header.jpg) no-repeat;
    float: left;
    margin: 0 0 0 200px;
   }
   #a3{
    width: 300px;
    height:50px;
    float: left;
    padding: 20px 0 0 50px;
   }
   #b{
    border: 1px solid #000;
    width: 1490px;
    height:30px;
    margin: 1px 2px 0;
    background-color:pink;
    padding: 10px;
   }
   
  </style>
 </head>
 <body>
  <div id="main">
   <div id="a">
    <div id="a1"></div>
    <div id="a2"></div>
    <div id="a3">
     <a href="#">登录</a>
     <a href="#">注册</a>
     <a href="#">购物车</a>
    </div>
   </div>
   
   
   <div id="b">
    <a href="#">首页</a>
    <a href="#">手机数码</a>
    <a href="#">电脑办公</a>
    
    
   </div>
   
   
   
   <div id="c"></div>
   
   
   
   
   <div id="d">
    <font>最新商品</font>
     <img src="title2.jpg" />
    <table width="100%">
      <tr>
       <td rowspan="2">
        <img src="big01.jpg" />
       </td>
       <td colspan="3">
        <img src="middle01.jpg" />
        
       </td>
       <td>
        <img src="small08.jpg" />
        <p align="center"><a href="#" >电饭煲</a></p>
        <p align="center">100</p>
       </td>
       <td>
        <img src="small08.jpg" />
        <p align="center"><a href="#" >电饭煲</a></p>
        <p align="center">100</p>
       </td>
       <td>
        <img src="small08.jpg" />
        <p align="center"><a href="#" >电饭煲</a></p>
        <p align="center">100</p>
       </td>
      </tr>
      <tr>
      
       <td>
        <img src="small08.jpg" /><p align="center"><a href="#" >电饭煲</a></p>
        <p align="center">100</p></td>
       <td><img src="small08.jpg" /><p align="center"><a href="#" >电饭煲</a></p>
        <p align="center">100</p></td>
       <td><img src="small08.jpg" /><p align="center"><a href="#" >电饭煲</a></p>
        <p align="center">100</p></td>
       <td><img src="small08.jpg" /><p align="center"><a href="#" >电饭煲</a></p>
        <p align="center">100</p></td>
       <td><img src="small08.jpg" /><p align="center"><a href="#" >电饭煲</a></p>
        <p align="center">100</p></td>
       <td><img src="small08.jpg" /><p align="center"><a href="#" >电饭煲</a></p>
        <p align="center">100</p></td>
      </tr>
     </table>
   </div>
   
   
   <div>
    <img src="ad.jpg" width="100%"/aalign="center">
   </div>
   
   
   <div>
    <font>最新商品</font>
     <img src="title2.jpg" />
    <table width="100%">
      <tr>
       <td rowspan="2">
        <img src="big01.jpg" />
       </td>
       <td colspan="3">
        <img src="middle01.jpg" />
        
       </td>
       <td>
        <img src="small08.jpg" />
        <p align="center"><a href="#" >电饭煲</a></p>
        <p align="center">100</p>
       </td>
       <td>
        <img src="small08.jpg" />
        <p align="center"><a href="#" >电饭煲</a></p>
        <p align="center">100</p>
       </td>
       <td>
        <img src="small08.jpg" />
        <p align="center"><a href="#" >电饭煲</a></p>
        <p align="center">100</p>
       </td>
      </tr>
      <tr>
      
       <td>
        <img src="small08.jpg" /><p align="center"><a href="#" >电饭煲</a></p>
        <p align="center">100</p></td>
       <td><img src="small08.jpg" /><p align="center"><a href="#" >电饭煲</a></p>
        <p align="center">100</p></td>
       <td><img src="small08.jpg" /><p align="center"><a href="#" >电饭煲</a></p>
        <p align="center">100</p></td>
       <td><img src="small08.jpg" /><p align="center"><a href="#" >电饭煲</a></p>
        <p align="center">100</p></td>
       <td><img src="small08.jpg" /><p align="center"><a href="#" >电饭煲</a></p>
        <p align="center">100</p></td>
       <td><img src="small08.jpg" /><p align="center"><a href="#" >电饭煲</a></p>
        <p align="center">100</p></td>
      </tr>
     </table>
   </div>
   
   
   
   <div>
    <img src="footer.jpg" width="100%" />
   </div>
   
   
   
   <div >
    
     <div id=i>
      <a href="#">关于我们</a>  
      <a href="#">联系我们</a>  
      <a href="#">招贤纳士</a>  
      <a href="#">法律声明</a>  
      <a href="#">您的意见</a>  
     </div>
     <div id="l">
      copyright<sup>&copy;</sup>版权所有mine
     </div>
   </div>
  </div>
 </body>
</html>

 

恰时
关注
【CSS+DIV】（3）——网上购物网站
Reka's blog ^_^
01-02 4189
背景：CSS学习已经完成了，这部分内容比较好玩，后面还分析制作了各种小例子，UI的内容做的十分绚丽多彩，如果加上后台内容就会更加完美了。目前网络上的购物网站已经越来越多了，淘宝、京东、当当等大型购物网站以及经营各种小生意的网站层出不穷。张罗网上的商店甚至成了很多人的工作。本文以网上的花店为例，介绍如何构建小型的网上商店。进一步熟练CSS构建网站的方法。 一、设计分析
CSS实操一，实现商城购物模块（实战知识点。最基础css+div实现）
qq_55006020的博客
06-28 190
图片地址请自行更换本地的地址。
html+css商城首页
09-21
商城首页 商城首页 商城首页 商城首页 商城首页 商城首页 商城首页 商城首页 商城首页 商城首页 商城首页 商城首页 商城首页
HTML 纯页面商城（简易版）
最新发布
Hello___Sunshine的专栏
06-30 752
购物商城购物商城搜索
商城css+div模板
10-29
商城css+div模板 方便你学习web前端的东西 熟悉电子商城网页开发
div+css实现网上书店网页
02-20
div+css实现bookstore div+css实现网上书店网页div+css实现网上书店网页
CSS+DIV布局赏析案例.zip_CSS+DIV布局赏析案例
09-22
在网页设计领域，CSS（Cascading Style Sheets）与DIV元素的组合是构建现代网页布局的基础。本案例“CSS+DIV布局赏析案例”主要展示了如何通过这两种技术来实现高效、美观且易于理解的网页结构。下面我们将深入探讨...
HTML期末大作业html+css+div二十个页面以上
06-13
`<div>`标签本身没有特定含义，但可以通过CSS赋予其样式和功能，使其成为网页布局的基石。通过调整`div`的宽度、高度、内边距和外边距，可以创建灵活的布局结构，如响应式设计或网格系统。此外，使用`float`、`...
css+div.rar_DIV_css_网站 教程
09-14
【描述】中提到，这是一个针对网站编辑的初级教程，旨在为初学者提供学习资源，帮助他们掌握使用CSS和div进行网页设计的基础知识。这暗示了教程可能涵盖了基础概念、布局技巧、样式应用等内容，适合那些对网页制作有...
CSS+DIV编写经验总结之CSS样式小模板
12-06
### CSS+DIV编写经验总结之CSS样式小模板 #### 概述 随着互联网技术的不断发展，Web前端设计已经成为了一个至关重要的领域。对于前端开发者来说，掌握CSS+DIV布局技巧是必不可少的一项技能。本文将根据提供的内容...
登陆页面案例（css+div）
11-28
在登录页面中，通常会用div来创建输入框组、登录按钮、可能的错误提示区域等各个部分，这样可以使页面结构清晰，易于管理和维护。 在这个"登陆页面案例"中，我们可以看到以下知识点： 1. **响应式布局**：一个现代...
电子商务网站静态页面美观大方代码简洁div+css商城静态页面
01-01
电子商务网站静态页面美观大方代码简洁七张静态页面，采用div+css做的，中文的
HTML+CSS简单实现凡客商城静态网页
02-28
用HTML+CSS模仿凡客商城做的静态页面，包括首页、列表页、详情页、登录、注册、购物车、支付页等
商城css+JS效果类
03-09
随便你啦述代码完成了购物车中的相关操作，比如价格计算，商品数量更换，商品删除等操作。 到这里我们已经完成了购物车的大部分功能，我们对html，css, BOM,DOM,json,cookie等进行了综合应用，相信读者理解之后一定会对自己的javascript学习更进一步，本示例中涉及的大部分代码都在本页中贴出，部分代码资源未向读者展示，读者可以点击下面的资源链接，下载本示例的全部代码及图片资料。本示例采用HBuilder编译器编译运行，涉及cookie操作，请读者自行安装服务器或者添加到HBuilder中运行查看。
基于HTML css的商城购物前端模板
01-19
涉及到HTML5，css和js的购物网站，页面精美，可运行，适合前端人员参考
仿小米手机商城网站html全套模板
10-24
学习前端知识时写的一个仿小米官网的一些页面+css样式+js验证代码
用DIV+CSS技术设计的数码购物商城网站（web前端网页制作课作业）
dreamweaver网页设计
10-03 357
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件
div+css静态网页设计 电商购物网站设计(55页) 电商网页设计制作 简单静态HTML网页作品 购物网页作业成品 学生商城网站模板
qq_524614081的博客
06-16 2127
HTML5期末大作业：电商购物网站设计——电商购物网站设计(55页) 电商网页设计制作 简单静态HTML网页作品 购物网页作业成品 学生商城网站模板 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求,
HTML+CSS做的商城页面
热门推荐
qq_53682646的博客
10-04 1万+
品优购小商城，用html+css做的三个静态页面
利用css+div+javascript编写一个html新闻页面
06-06
好的，我可以为你提供一个简单的HTML新闻页面，其中包含一个标题、一些新闻内容和一些相关链接。通过CSS样式，我们可以让页面看起来更加美观和现代化。 HTML代码： ``` <!DOCTYPE html> <html> <head> <title>新闻页面</title> <style> body { font-family: Arial, sans-serif; background-color: #f2f2f2; } .container { margin: 0 auto; width: 80%; padding: 20px; background-color: #fff; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.3); } h1 { font-size: 36px; margin-bottom: 20px; color: #333; } .news-item { margin-bottom: 20px; padding: 20px; background-color: #f9f9f9; border-radius: 5px; } .news-item h2 { font-size: 24px; color: #333; margin-bottom: 10px; } .news-item p { font-size: 16px; color: #666; line-height: 1.5; margin-bottom: 10px; } .related-links { margin-top: 20px; padding: 20px; background-color: #f9f9f9; border-radius: 5px; } .related-links ul { list-style: none; padding: 0; margin: 0; } .related-links li { margin-bottom: 10px; } .related-links a { font-size: 16px; color: #333; text-decoration: none; transition: color 0.3s ease-in-out; } .related-links a:hover { color: #4CAF50; } </style> </head> <body> <div class="container"> <h1>今日新闻</h1> <div class="news-item"> <h2>标题1</h2> <p>新闻内容1</p> </div> <div class="news-item"> <h2>标题2</h2> <p>新闻内容2</p> </div> <div class="news-item"> <h2>标题3</h2> <p>新闻内容3</p> </div> <div class="related-links"> <h3>相关链接</h3> <ul> <li><a href="#">链接1</a></li> <li><a href="#">链接2</a></li> <li><a href="#">链接3</a></li> </ul> </div> </div> </body> </html> ``` 这个页面包含一个标题、三个新闻内容块和一个相关链接块。每个新闻内容块包含一个标题和一段文本，相关链接块包含一个标题和一个包含链接列表的无序列表。通过CSS样式，我们可以让页面看起来更加美观和现代化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值