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写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
随机推荐
- spark-submit [options]
执行时需要传入的参数说明如下: Usage: spark-submit [options] <app jar | python file> [app options] 参数名称 含义 -- ...
- PHP中有关Session的函数比较多,最常用到的也就这么几个函数
php中的cookie与session技术详解 一.cookie介绍 cookie常用于识别用户.cookie是服务器留在用户计算机中的小文件.每当相同的计算机通过浏览器请求页面时,它同时会发送coo ...
- 一些开发遇到的"小问题",你能答对多少?
我会把问题先写在前面,答案用白色字体写在后面.所以用鼠标选择文本就可以看到答案啦. 调用await后因为切换了线程环境(这种说法可能不严谨,但我只能想到这种说法),httpcontext会为null. ...
- 从eclipse到Android studio/迁移eclipse的Android项目到Android studio平台的注意事项
整体要注意的地方 先说明一下整体需要注意的地方 1在Android studio建立项目的时候,要注意包名和原来的完全一致,不然会有很多需要改动. 2依赖的jar一定一定要找齐,不然新建项目引用不到, ...
- eclipse常用窗口和功能总结
1.左上角File按钮功能:最重要的导入import第三方项目,maven,git,general等. File->import File->properties按钮,显示项目的存储位置, ...
- HTML: 字體設置
針對 font-family 屬性進行詳細設置, 首先我們要瞭解,字體分類: ①無襯線字體: san-serif,一般用於文章標題 ②有襯線字體: serif,一般用在段落處或者非標題部分 當我們設置 ...
- Mysql Cluster配置基本篇
一.下载mysql-cluster 从mysql官网下载对应的mysql-cluster 二.配置管理节点 1.解压mysql-cluster,找到解压文件中的ndb_mgm和ndb_mgmd 2.复 ...
- Write Cache-friendly Code
Computer Systems A Programmer's Perspective Second Edition In Section 6.2, we introduced the idea of ...
- diy-pagination-javascript 分页
<?php isset($_REQUEST['form_single_page_num']) && !empty($_REQUEST['form_single_page_num' ...
- Delphi XE5 如何与其他版本共存
如果你想使用Delphi诸如XE4.XE3.XE2.XE之类的版本跟Delphi XE5共存的话,在cglm.ini中简单修改两行就行啦. 找到Delphi XE5的安装根目录C:\Program F ...