要求:仿写一个静态的网页,主要采用HTML+CSS+DIV的布局方式,

新建两个文件:demo.html、demo.css

图片素材:image.zip

demo.html代码如下:

  1. <!doctype html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="description" content="this is a web site">
  6. <meta name="keywords" content="web,site,html,css">
  7.  
  8. <title>这是一个静态网页</title>
  9.  
  10. <link rel="stylesheet" type="text/css" href="/Users/mac/Desktop/网页项目/css/demo.css">
  11. </head>
  12.  
  13. <body>
  14. <div id="web_logol">
  15. <div class="logol_image">
  16. <img src="/Users/mac/Desktop/网页项目/image/logo.jpg">
  17. </div>
  18. <div class="login_regester">
  19. <img src="/Users/mac/Desktop/网页项目/image/kuang.jpg">
  20. <form>
  21. <ul>
  22. <li><input type="button" name="login" value="登录" onclick="" class="login_btn"></li>
  23. <li><input type="button" name="regester" value="注册" onclick="" class="regester_btn"></li>
  24. </ul>
  25. </form>
  26. </div>
  27. </div>
  28.  
  29. <div id="web_navi">
  30. <ul>
  31. <li><a href="">必读</a></li>
  32. <li><a href="">市场</a></li>
  33. <li><a href="">个股</a></li>
  34. <li><a href="">内参</a></li>
  35. <li><a href="">新股</a></li>
  36. <li><a href="">创业板</a></li>
  37. <li><a href="">股指期货</a></li>
  38. <li><a href="">中小板</a></li>
  39. <li><a href="">B股</a></li>
  40. <li><a href="">环球股市</a></li>
  41. <li><a href="">港股</a></li>
  42. <li><a href="">赢家点金</a></li>
  43. <li><a href="">热点话题</a></li>
  44. </ul>
  45. </div>
  46.  
  47. <div id="web_headPic">
  48. <img src="/Users/mac/Desktop/网页项目/image/tupian.jpg">
  49. </div>
  50.  
  51. <div id="web_content">
  52. <div class="first">
  53. <div class="top_title">
  54. <img src="/Users/mac/Desktop/网页项目/image/dian.jpg" alt="小三角角标" class="img1">
  55. <h4>今日头条</h4>
  56. <img src="/Users/mac/Desktop/网页项目/image/xian1.jpg" alt="虚线" class="img2">
  57. </div>
  58. <div class="mid_content">
  59. <h3>跨界并购最受捧 四家公司有望成为香饽饽</h3>
  60. <p>[双重因素引爆军工股 布局三类概念股] [愈4亿大单热捧10股]</p>
  61. <p>[军工:秋冬暂蛰伏 牛途再蓄势] [次新股成宠儿 基金加仓7股]</p>
  62.  
  63. <h3>39公司披露三季报 智能终端多只股报喜</h3>
  64. <p>[基金三季报 重仓12只股] [保险股三季报前瞻 个股全线飘红]</p>
  65. <p>[三季暴露牛散踪迹 新近十股] [社保保仓66股 医药遭减持]</p>
  66. <img src="/Users/mac/Desktop/网页项目/image/xian1.jpg" alt="虚线" class="img2">
  67. </div>
  68. <div class="bottom_content">
  69. <div>
  70. <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
  71. <p>个股机会 | 10月23日公告透露利好:8股有潜力</p>
  72. </div>
  73. <div>
  74. <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
  75. <p>奥飞动漫:加码电影投资 打造衍生渠道 推荐评级</p>
  76. </div>
  77. <div>
  78. <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
  79. <p>阳光电源:业绩符合预期 看好储能 目标上调24元</p>
  80. </div>
  81. <div>
  82. <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
  83. <p>上海凯宝:业绩平稳增长 期待外延发展 推荐评级</p>
  84. </div>
  85. <div>
  86. <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
  87. <p>主力动向 | 多家上市公司高管窗口期违规交易</p>
  88. </div>
  89. <div>
  90. <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
  91. <p>医疗汽车以及新股成宠儿 基金加仓7只股票</p>
  92. </div>
  93. <div>
  94. <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
  95. <p>三季报出炉 基金经理谨慎开袋A浮四季度行情</p>
  96. </div>
  97. <div>
  98. <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
  99. <p>医疗板块跌显防御 公私募调仓买入布局明年</p>
  100. </div>
  101. </div>
  102. </div>
  103. <div class="second">
  104. <div class="top_title">
  105. <img src="/Users/mac/Desktop/网页项目/image/dian.jpg" alt="小三角角标" class="img1">
  106. <h4>传闻黑幕</h4>
  107. <a href="">[更多]</a>
  108. <img src="/Users/mac/Desktop/网页项目/image/xian1.jpg" alt="虚线" class="img3">
  109. </div>
  110. <div class="bottom_content">
  111. <div>
  112. <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
  113. <p>10月23日上市公司传闻求证</p>
  114. </div>
  115. <div>
  116. <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
  117. <p>10月23日私募内部重要传闻揭秘</p>
  118. </div>
  119. <div>
  120. <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
  121. <p>10月22日上司公司传闻求证</p>
  122. </div>
  123. <div>
  124. <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
  125. <p>10月22日私募内部重要传闻揭秘</p>
  126. </div>
  127. <div>
  128. <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
  129. <p>10月20日上司公司传闻求证</p>
  130. </div>
  131. <div>
  132. <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
  133. <p>10月20日私募内部重要传闻揭秘</p>
  134. </div>
  135. <div>
  136. <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
  137. <p>10月17日上司公司传闻求证</p>
  138. </div>
  139. <div>
  140. <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
  141. <p>方正证券投资晨报(2014-10-23)</p>
  142. </div>
  143. <div>
  144. <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
  145. <p>浙商证券投资晨报(2014-10-23)</p>
  146. </div>
  147. <div>
  148. <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
  149. <p>海通证券投资晨报(2014-10-23)</p>
  150. </div>
  151. <div>
  152. <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
  153. <p>世纪证券投资晨报(2014-10-23)</p>
  154. </div>
  155. <div>
  156. <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
  157. <p>中金证券投资晨报(2014-10-22)</p>
  158. </div>
  159. <div>
  160. <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
  161. <p>华林证券投资晨报(2014-10-22)</p>
  162. </div>
  163. <div>
  164. <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
  165. <p>开源证券投资晨报(2014-10-22)</p>
  166. </div>
  167. </div>
  168. </div>
  169. <div class="third">
  170. <div class="top_title">
  171. <img src="/Users/mac/Desktop/网页项目/image/dian.jpg" alt="小三角角标" class="img1">
  172. <h4>热点关注</h4>
  173. <div class="more">
  174. <img src="/Users/mac/Desktop/网页项目/image/ban.jpg">
  175. </div>
  176. </div>
  177. <div class="bottom_content">
  178. <div>
  179. <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
  180. <p>政策红利或足部兑现 动力煤价价格持续上涨</p>
  181. </div>
  182. <div>
  183. <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
  184. <p>热点前瞻:从新能源汽车寻找投资机会</p>
  185. </div>
  186. <div>
  187. <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
  188. <p>保险股三季前瞻:费率市场化改革或催</p>
  189. </div>
  190. <div>
  191. <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
  192. <p>欧洲甲乙酮市场价格暴涨 货源趋紧提振国</p>
  193. </div>
  194. <div>
  195. <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
  196. <p>39家公司披露三季度业绩 文化传媒业快</p>
  197. </div>
  198. <div>
  199. <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
  200. <p>在线教育公司领涨美股 油气能源板块受市</p>
  201. </div>
  202. <div>
  203. <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
  204. <p>社保基金三季度持仓66股 医疗板块多遭</p>
  205. </div>
  206. <div>
  207. <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
  208. <p>体育产业:黄金十年开幕</p>
  209. </div>
  210. <div>
  211. <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
  212. <p>甲乙酮价格暴涨50% 行业景气度迎改善契</p>
  213. </div>
  214. <div>
  215. <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
  216. <p>农林牧渔行业专题报告:生猪养殖业库存、</p>
  217. </div>
  218. <div>
  219. <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
  220. <p>银行行业城商行异地扩张,东边亮亮亮西</p>
  221. </div>
  222. <div>
  223. <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
  224. <p>医疗生物行业:突破枷锁,改革在即</p>
  225. </div>
  226. <div>
  227. <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
  228. <p>地产行业:销售降幅略有缓解投资增速或</p>
  229. </div>
  230. <div>
  231. <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
  232. <p>建材行业:浮玻价格连续两周下滑 工业或</p>
  233. </div>
  234. </div>
  235. </div>
  236. </div>
  237.  
  238. <div id="web_footerPic">
  239. <img src="/Users/mac/Desktop/网页项目/image/xian5.jpg" alt="边界线">
  240. <div><h3>预约开户</h3></div>
  241. <div><img src="/Users/mac/Desktop/网页项目/image/tutu_03.jpg"></div>
  242. <div><img src="/Users/mac/Desktop/网页项目/image/tutu_05.jpg"></div>
  243. <div><img src="/Users/mac/Desktop/网页项目/image/tutu_07.jpg"></div>
  244. <div><img src="/Users/mac/Desktop/网页项目/image/tutu_09.jpg"></div>
  245. <div><img src="/Users/mac/Desktop/网页项目/image/tutu_11.jpg"></div>
  246. <div><img src="/Users/mac/Desktop/网页项目/image/tutu_13.jpg"></div>
  247. <div><img src="/Users/mac/Desktop/网页项目/image/tutu_15.jpg"></div>
  248. <div><img src="/Users/mac/Desktop/网页项目/image/tutu_17.jpg"></div>
  249. </div>
  250.  
  251. <div id="web_footerContent">
  252. <p>公司地址:深圳市福田区华强路赛格科技园四栋10层1006 客户热线:0755-8839 9099 (粤ICP备12039400号-2)</p>
  253. <p>信息网络传播视听节目许可证:1909407号 华股财经所载文章、数据仅供参考,使用前请合适,风险自负【风险提示】</p>
  254. </div>
  255. </body>
  256. </html>

demo.css代码如下:

  1. /*------------------------------------------logol图-----------------------------------------*/
  2. #web_logol{
  3. width: 960px;
  4. height: 60px;
  5. margin: auto;
  6. }
  7.  
  8. .logol_image{
  9. float: left;
  10. }
  11.  
  12. .logol_image img{
  13. height: 60px;
  14. width: 250px;
  15. margin-top: 10px;
  16. }
  17.  
  18. .login_regester{
  19. width: 300px;
  20. height: 60px;
  21. background-color: white;
  22. margin: auto;
  23. float: right;
  24. }
  25.  
  26. .login_regester img{
  27. margin:;
  28. margin-left: 30px;
  29. margin-top: 40px;
  30. }
  31.  
  32. .login_regester form {
  33. float: right;
  34. margin-top: -48px;
  35. }
  36.  
  37. .login_regester form ul{
  38. list-style: none;
  39. }
  40. .login_regester form ul li{
  41. display: inline-block;
  42. text-decoration: none;
  43. }
  44.  
  45. .login_btn{
  46. border-style: none;
  47. background-color: white;
  48. color: #999;
  49. font-size: 13px;
  50. }
  51.  
  52. .regester_btn{
  53. border-style: none;
  54. color: red;
  55. background-color: white;
  56. font-size: 13px;
  57. width: 50px;
  58. border-left: solid 1px #ddd;
  59. }
  60.  
  61. /*------------------------------------------导航栏-----------------------------------------*/
  62.  
  63. #web_navi{
  64. width: 960px;
  65. height: 40px;
  66. background-image: url(/Users/mac/Desktop/网页项目/image/tu11.jpg);
  67. margin: auto;
  68. }
  69.  
  70. #web_navi ul{
  71. list-style: none;
  72. }
  73. #web_navi ul li{
  74. display: inline-block;
  75. padding-right: 16px;
  76. margin:;
  77. margin-top: 8px;
  78. border-right: solid 1px black;
  79. }
  80. #web_navi ul li a{
  81. font-size: 14px;
  82. color: white;
  83. text-decoration: none;
  84. padding-left: 9px;
  85. }
  86.  
  87. /*------------------------------------------单图或轮播图-----------------------------------------*/
  88. #web_headPic{
  89. width: 960px;
  90. height: 160px;
  91. margin: auto;
  92. margin-top: 5px;
  93. }
  94. #web_headPic img{
  95. width: 960px;
  96. height: 160px;
  97. }
  98.  
  99. /*------------------------------------------正文-----------------------------------------*/
  100. #web_content{
  101. width: 960px;
  102. height: 400px;
  103. margin: auto;
  104. }
  105.  
  106. .first{
  107. float: left;
  108. width: 349px;
  109. height: 400px;
  110. border-left: dashed 1px #aaa;
  111. }
  112.  
  113. .top_title{
  114. padding-bottom: 5px;
  115. }
  116.  
  117. .img1{
  118. float: left;
  119. margin-left: 10px;
  120. margin-top: 5px;
  121. }
  122.  
  123. .top_title h4{
  124. font-size: 13px;
  125. color: rgb(50,76,165);
  126. margin:;
  127. margin-left: 30px;
  128. margin-top: 5px;
  129. }
  130. .img2{
  131. float: left;
  132. margin-left: -5px;
  133. padding-top: 5px;
  134. padding-bottom: 5px;
  135. }
  136.  
  137. .mid_content{
  138. padding-bottom: 10px;
  139. }
  140.  
  141. .mid_content h3{
  142. font-size: 16px;
  143. margin:;
  144. margin-left: 30px;
  145. color: rgb(51,51,51);
  146. padding-top: 10px;
  147. }
  148.  
  149. .mid_content p{
  150. font-size: 12px;
  151. color: rgb(114,114,114);
  152. margin:;
  153. margin-left: 10px;
  154. }
  155.  
  156. .bottom_content{
  157. padding-top: 10px;
  158. padding-left: 10px;
  159. }
  160.  
  161. .bottom_content div img{
  162. margin:;
  163. margin:10px;
  164. margin-top: 8px;
  165. float: left;
  166. width: 5px;
  167. }
  168.  
  169. .bottom_content div p{
  170. margin:;
  171. margin-top: 5px;
  172. font-size: 14px;
  173. color: rgb(114,114,114);
  174. }
  175.  
  176. .second{
  177. width: 260px;
  178. height: 400px;
  179. float: left;
  180. }
  181.  
  182. .top_title a{
  183. float: right;
  184. font-size: 13px;
  185. padding-right: 16px;
  186. margin:;
  187. margin-top: -20px;
  188. }
  189.  
  190. .img3{
  191. float: left;
  192. margin-left: -5px;
  193. padding-top: 5px;
  194. width: 250px;
  195. }
  196.  
  197. .third{
  198. width: 349px;
  199. height: 400px;
  200. float: left;
  201. border-right: dashed 1px #aaa;
  202. }
  203.  
  204. .more img{
  205. float: right;
  206. margin:;
  207. margin-top: -20px;
  208. }
  209.  
  210. /*------------------------------------------合作商图-----------------------------------------*/
  211. #web_footerPic{
  212. width: 960px;
  213. height: 100px;
  214. margin: auto;
  215. }
  216.  
  217. #web_footerPic img{
  218. float: left;
  219. margin:;
  220. margin-bottom: 8px;
  221. }
  222.  
  223. #web_footerPic h3{
  224. padding-right: 10px;
  225. font-size: 14px;
  226. margin:;
  227. margin-top: 8px;
  228. }
  229.  
  230. #web_footerPic div img{
  231. margin:;
  232. margin-top: 5px;
  233. margin-right: 18px;
  234. padding-left: 2px;
  235. width: 100px;
  236. height: 50px;
  237. }
  238.  
  239. /*------------------------------------------授权信息-----------------------------------------*/
  240. #web_footerContent{
  241. width: 960px;
  242. height: 50px;
  243. margin: auto;
  244. }
  245.  
  246. #web_footerContent p{
  247. text-align: center;
  248. font-size: 12px;
  249. color: #999;
  250. margin:;
  251. margin-top: 5px;
  252. }

效果图如下:

HTML: 仿写一个财经类静态的网页的更多相关文章

  1. 仿写一个简陋的 IOC/AOP 框架 mini-spring

    讲道理,感觉自己有点菜.Spring 源码看不懂,不想强行解释,等多积累些项目经验之后再看吧,但是 Spring 中的控制反转(IOC)和面向切面编程(AOP)思想很重要,为了更好的使用 Spring ...

  2. 利用JS写一个计算平方的网页

    <!-- 计算一个数的平方并显示出来 --> <!DOCTYPE html> <html> <head> <meta charset=" ...

  3. ASP.NET WebAPI 14 仿写Filter管道

    WebAPI中有设计了几种管道(Channel),大概如下:HttpMessageHandler,ActionFilter管道,ExceptionFilter管道.在三种管道中HttpMessageH ...

  4. 手写一个Redux,深入理解其原理

    Redux可是一个大名鼎鼎的库,很多地方都在用,我也用了几年了,今天这篇文章就是自己来实现一个Redux,以便于深入理解他的原理.我们还是老套路,从基本的用法入手,然后自己实现一个Redux来替代源码 ...

  5. 自制 os 极简教程1:写一个操作系统有多难

    为什么叫极简教程呢?听我慢慢说 不知道正在阅读本文的你,是否是因为想自己动手写一个操作系统.我觉得可能每个程序员都有个操作系统梦,或许是想亲自动手写出来一个,或许是想彻底吃透操作系统的知识.不论是为了 ...

  6. QT学习日记篇-03-仿写一个智能家居界面

    课程大纲: <1>让界面漂亮起来,仿写一个智能家居界面 ->第一:给QT工程添加图片 进入下一步: <注意路径和名称一定不能有中文>                   ...

  7. 前端练手小项目——网页版qq音乐仿写

    qq音乐网页版仿写 一些步骤与注意事项 一开始肯定就是html+css布局和页面了,这段特别耗时间,耐心写完就好了 首先要说一下大致流程: 一定要先布局html!,所以一定要先分析页面布局情况,用不同 ...

  8. 使用 vue 仿写的一个购物商城

    在学习了 vue 之后,决定做一个小练习,仿写了一个有关购物商城的小项目.下面就对项目做一个简单的介绍. 项目源码: github 项目的目录结构 -assets 与项目有关的静态资源,包括 css, ...

  9. 分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

随机推荐

  1. HTML中为何P标签内不可包含块元素?

    起因:在做项目时发现原本在DW中无误的代码到了MyEclipse6.0里面却提示N多错误,甚是诧异.于是究其原因,发现块级元素P内是不能嵌套DIV的. 深究:我们先来认识in-line内联元素和blo ...

  2. Scala:使用Sublime开发Scala

    Scala:使用Sublime开发Scala 第一步:[Tools][Build System][New Build System] 第二步:在打开的新文件中输入: { //"cmd&quo ...

  3. [转] - 如何用QTcpSocket传送图片

    我们知道,tcp网络编程发送数据是利用套接字来实现,将要传输的东西转化为数据流再进行传输,为了确保数据传输的准确性和安全性,我们在发送数据流前发送一个quint32的常量来表示所要发送的数据的大小:当 ...

  4. 免杀ASP一句话

    <% wei="日日日)""wei""(tseuqer lave 日" execute(UnEncode(wei)) function ...

  5. 使用Eclipse自带Web Service插件(Axis1.4)生成Web Service服务端/客户端

    创建一个名字为math的Java web工程,并将WSDL文件拷入该工程中 将Axis所需的jar包拷贝至WebRoot\WEB-INF\lib目录下,这些jar包会自动导入math工程中 一,生成W ...

  6. HDU 4825 Xor Sum(经典01字典树+贪心)

    Xor Sum Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 132768/132768 K (Java/Others) Total ...

  7. CodeForces 86D Powerful array(莫队+优化)

    D. Powerful array time limit per test 5 seconds memory limit per test 256 megabytes input standard i ...

  8. PHP+jQuery 注册模块的改进之三:使用 Smarty3

    Smarty3.1X( 最新版本 3.1.19) 比起Smarty2.x修改了不少特性.我把这个模块使用Smarty3.1.18 ( 下载地址http://www.smarty.net/files/S ...

  9. phpstorm配置svn

    phpstorm配置svn 发表于3年前(2013-02-28 10:50)   阅读(8249) | 评论(0) 4人收藏此文章, 我要收藏 赞1 9月19日成都 OSC 源创会正在报名,送机械键盘 ...

  10. PhpStorm中文教程

    PhpStorm中文教程 | 浏览:15972 | 更新:2014-06-10 21:14 1 2 3 4 5 分步阅读 PhpStorm是一款强大的IDE,非常适合于PHP开发人员及前端工程师.提供 ...