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写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
随机推荐
- iOS开发之正则表达式
正则表达式用于字符串处理.表单验证等场合,实用高效.现将一些常用的表达式收集于此,以备不时之需. 匹配中文字符的正则表达式: [\u4e00-\u9fa5]评注:匹配中文还真是个头疼的事,有了这个表达 ...
- Odoo(OpenERP) 多个子类重载同一个父类方法的执行顺序及如何调用父类的父类方法
首先说下起因,在修改英国会计模块(没错,就是那个安格鲁撒克逊记账模式!)中不符合中国国情的部分供能时,碰到了一个棘手的问题,简单的说就是B类继承它的父类A并重载了A的方法M,同时C类也继承了A类也重载 ...
- VirtIE6
VirtIE6--能在win7上直接运行的单文件 http://down.iefans.net/VirtIE6.rar
- HDU 1075 What Are You Talking About（Trie的应用）
What Are You Talking About Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 102400/204800 K ...
- NBUT 1635 Explosion（最小顶点覆盖）
[1635] Explosion 时间限制: 10000 ms 内存限制: 65535 K 问题描述 there is a country which contains n cities connec ...
- FZU 2195 思维
很无聊的背景故事...求最短的时间原来就是省去了检查员最后上山的时间...还让不让人回家了... 感觉这是个最短路 思想是求出来dis 然后求里面最大的那条边 用总长减去最长边 就是答案 写了一个小时 ...
- A trip through the Graphics Pipeline 2011_04
Welcome back. Last part was about vertex shaders, with some coverage of GPU shader units in general. ...
- spring mvc和spring配置扫描包问题
spring mvc和spring俩配置文件,其中都要配置扫描包. <context:component-scan base-package="com.controller" ...
- 【翻译】西川善司「实验做出的游戏图形」「GUILTY GEAR Xrd -SIGN-」中实现的「纯卡通动画的实时3D图形」的秘密，前篇（2）
Lighting和Shading(2)镜面反射的控制和模拟次级表面散射技术 http://www.4gamer.net/games/216/G021678/20140703095/index_2.ht ...
- Linux文件管理命令
cd /home 进入 '/ home' 目录' cd .. 返回上一级目录 cd ../.. 返回上两级目录 cd 进入个人的主目录 cd ~user1 进入个人的主目录 cd - 返回上次所在的目 ...