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写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
随机推荐
- VTK 6.3.0 Qt 5.4 MinGW 4.9.1 Configuration 配置
Download VTK 6.3.0 Download Qt 5.4 with MinGW 4.9.1 Download CMake 3.2.0 I assume you've already ins ...
- javascript判断非空
/* *判断非空 * */ function isEmpty(val){ if(val == null)return true; if(val == undefined || val == 'unde ...
- CentOS源列表
vi /etc/yum.repos.d/CentOS-Base.repo CentOS 5: # CentOS-Base.repo # # The mirror system uses the con ...
- spring redis整合
1,利用spring-data-redis整合 项目使用的pom.xml: <project xmlns="http://maven.apache.org/POM/4.0.0" ...
- CKEditor的使用-编辑文本
官网下载以及演示:http://ckeditor.com/ 引入js <script src="/Example6/ckeditor/ckeditor.js">< ...
- mysql外键实战
一.基本概念 1.MySQL中“键”和“索引”的定义相同,所以外键和主键一样也是索引的一种.不同的是MySQL会自动为所有表的主键进行索引,但是外键字段必须由用户 进行明确的索引.用于外键关系的字段必 ...
- PAT (Top Level) Practise 1008 Airline Routes（Tarjan模版题）
1008. Airline Routes (35) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue Given a ...
- jiffies
linux中的jiffies变量 全局变量jiffies用来记录自系统启动以来产生的节拍的总数.启动时,内核将该变量初始化为0,此后,每次时钟中断处理程序都会增加该变量的值.一秒内时钟中断的次数等于H ...
- PHP+jQuery 列表分页类 ( 支持 url 分页 / ajax 分页 )
/* ******* 环境:Apache2.2.8 ( 2.2.17 ) + PHP5.2.6 ( 5.3.3 ) + MySQL5.0.51b ( 5.5.8 ) + jQuery-1.8.3.mi ...
- sql group by+字段
MySQL GROUP BY 语句 GROUP BY 语句根据一个或多个列对结果集进行分组. 在分组的列上我们可以使用 COUNT, SUM, AVG,等函数. 2.在group by的分组字段上,我 ...