请问怎么用HTML代码实现下图所示的样式？_百度知道
请问怎么用HTML代码实现下图所示的样式？
我有更好的答案
这种页面的布局，应该是前端开发最基本的页面布局方式了，一般考察的是元素标签及浮动的应用。代码格式如下：&style&type=&text/css&&&&&&&&&&&&&&&&&*{margin:0;padding:0}&&&&&&&&&&&&.content{&width:900&overflow:hidden&}&&&&&&&&&&&&.box{width:260&margin-right:10&float:left}&&&&&&&&&&&&.box_footer{&padding-left:10&padding-right:10&padding-top:10&&&&&&&&&&&&&padding-bottom:10&}&/style&&div&class=&content&&&&&&&&&&&&&&&div&class=&box&&&&&&&&&&&&&&&&&&&&&&&&&&&div&class=&box_content&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&img&src=&图片路径&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&div&class=&box_footer&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&p&内容内容内容内容内容内容&/p&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&p&&/p&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&/div&&&&&&&&&&&&&&&&&&&&&&&&&&/div&&&&&&&&&&&&&&/div&&&&&&&&&&&&&&&&&&&&&&&&&&div&class=&box&&&&&&&&&&&&&&&&&&&&&&&&&&&div&class=&box_content&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&img&src=&图片路径&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&div&class=&box_footer&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&p&内容内容内容内容内容内容&/p&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&p&&/p&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&/div&&&&&&&&&&&&&&&&&&&&&&&&&&/div&&&&&&&&&&&&&&/div&&&&&&&&&&&&&&&&&&&&&&div&class=&box&&&&&&&&&&&&&&&&&&&&&&&&&&&div&class=&box_content&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&img&src=&图片路径&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&div&class=&box_footer&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&p&内容内容内容内容内容内容&/p&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&p&&/p&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&/div&&&&&&&&&&&&&&&&&&&&&&&&&&/div&&&&&&&&&&&&&&/div&&/div&备注：没有做测试，大致样式应该如此，个人需要做一定调整，给你留点空间，自我学习更重要！！
采纳率：47%
来自团队：
很基本的DIV+CSS布局，如果用表格来做的话就更简单了。
能写一下基本样式代码吗？先谢谢大神了
为您推荐：
其他类似问题
您可能关注的内容
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。Time: October 2, 2017
注：Typecho1.1新版本的Markdown语法不兼容导致原生HTML5视频标签解析播放失败的解决方法已经给出：
其实之前我一直在用羽中的视频播放插件JWPlayer，效果感觉不够理想，点击全屏播放时不能完全全屏，有时候播放转换MP4视频无法解析，分析JWPlayer插件时，发现利用的正是HTML5，何不直接使用HTML5实现更简单更纯粹的播放效果呢？
在自己分析过程中，我只用到自己常用的标签属性，如果有其他属性，其实都可以添加的。
HTML5 Video标签的使用
本人自用Video标签含有src、poster、preload、controls、width、height等几个属性， 以及一个内部使用的标签。
(1) src属性和poster属性
你能想象src属性是用来干啥的。跟标签的一样，这个属性用于指定视频的地址。而poster属性用于指定一张图片，在当前视频数据无效时显示（预览图）。视频数据无效可能是视频正在加载，可能是视频地址错误等等。
&video width=&658& height=&444& src=&https://googlo.in/usr/uploads/7548116.mp4&poster=&https://googlo.in/usr/uploads/8215693.jpg&&&/video&
(2) preload属性
这个属性也能通过名字了解用处，此属性用于定义视频是否预加载。属性有三个可选择的值：none、metadata、auto。如果不使用此属性，默认为auto。
&video width=&658& height=&444& src=&https://googlo.in/usr/uploads/7548116.mp4& poster=&https://googlo.in/usr/uploads/8215693.jpg& preload=&auto&&&/video&
None：不进行预加载。使用此属性值，可能是页面制作者认为用户不期望此视频，或者减少HTTP请求。
Metadata：部分预加载。使用此属性值，代表页面制作者认为用户不期望此视频，但为用户提供一些元数据。
Auto：全部预加载。
(3) controls属性
&video width=&658& height=&444& poster=&https://googlo.in/usr/uploads/8215693.jpg& preload=&none& controls=&controls&&&source src=&https://googlo.in/usr/uploads/7548116.mp4& /&&/video&
Controls属性用于向浏览器指明页面制作者没有使用脚本生成播放控制器，需要浏览器启用本身的播放控制栏。
控制栏须包括播放暂停控制，播放进度控制，音量控制等等。
(4) width属性和height属性
width属性为视频的宽度，height属性为视频的高度，此标签不做过多讲解。
(5) source标签
&video width=&658& height=&444& poster=&https://googlo.in/usr/uploads/8215693.jpg& preload=&none& controls=&controls&&&source src=&https://googlo.in/usr/uploads/7548116.mp4& /&&/video&
Source标签用于给媒体（因为audio标签同样可以包含此标签，所以这儿用媒体，而不是视频）指定多个可选择的（浏览器最终只能选一个）文件地址，且只能在媒体标签没有使用src属性时使用。
浏览器按source标签的顺序检测标签指定的视频是否能够播放（可能是视频格式不支持，视频不存在等等），如果不能播放，换下一个。此方法多用于兼容不同的浏览器。Source标签本身不代表任何含义，不能单独出现。
此标签包含src、type、media三个属性。
src属性：用于指定媒体的地址，和video标签的一样。
Type属性：用于说明src属性指定媒体的类型，帮助浏览器在获取媒体前判断是否支持此类别的媒体格式。
Media属性：用于说明媒体在何种媒介中使用，不设置时默认值为all，表示支持所有媒介。
(6) 一个完整的例子
&video width=&658& height=&444& poster=&https://googlo.in/usr/uploads/8215693.jpg& preload=&none& controls=&controls&&&source src=&https://googlo.in/usr/uploads/7548116.mp4& /&&/video&
注：自行替换链接为自己的域名链接地址！
效果预览：
添加新评论
: 嚯，wordpress搭建
: 博客挺皮的啊
: good! 请问博主文章的图片点击放大缩小是怎么实现的...
: 已成功开启，很漂亮，蟹蟹大佬分享回复！
: 你好，很喜欢你的博客和文章，能否分享下“归档”页面，谢谢！
: https://googlo.in/Markdown....
: 从业一个领域8年了、迷茫过、激动过。
和作者一样有过...
: 我想问一下，“阅读全文”
这几个字 怎么往下靠右边显...
: 我想问一下 关于文章
地下右边“阅读全文>>”求一段网页表格的html代码.- 简单-._百度知道
求一段网页表格的html代码.- 简单-.
就是下面的表格 怎么也做不出单元格的颜色来 麻烦给个代码
谢谢回答 不是背景颜色 是边框颜色就是要一个和图上一模一样的表格 我试了好多都不行 点击图片 看清晰图
我有更好的答案
你好，我按照你的要求写的如下代码，可以直接运行.&center&&table&&caption style=&text-decoration:font-weight:&&请留下个人资料&/caption&&tr&&td&姓名：&/td&&td&&input type=&text&&&/td&&/tr&&tr&&td&电话：&/td&&td&&input type=&text&&&/td&&/tr&&tr&&td&E-mail：&/td&&td&&input type=&text&&&/td&&/tr&&tr&&td&性别：&/td&&td&&input type=&radio& checked&男　&input type=&radio&&女&/td&&/tr&&tr&&td&年龄：&/td&&td&&select&&option&20以下&/option&&/select&&/td&&/tr&&tr&&td&留言版：&/td&&td&&textarea&&/textarea&&/td&&/tr&&tr&&td&您的爱好：&/td&&td&&input type=&checkbox&&运动　&input type=&checkbox&&阅读&br&&input type=&checkbox&&听音乐　&input type=&checkbox&&旅游&/td&&/tr&&/table&&input type=&submit& value=&提交&&　&input type=&reset& value=&全部重写&&&/center&&div&标题内容:&input&type=&text&&id=&a&&&/div&&div&标题格式:&input&type=&text&&id=&b&&&/div&&div&标题大小:&input&type=&text&&id=&c&&&/div&&button&type=&button&&id=&d&&预览&/button&&div&id=&e&&&/div&//&绑定&id&为&d&的按钮的点击事件document.getElementById(&d&).onclick&=&function&()&{&&&&//&获取&id&为&a&的输入框的值&&&&var&a&=&&标题内容:&&+&document.getElementById(&a&).&&&&//&获取&id&为&b&的输入框的值&&&&var&b&=&&标题格式:&&+&document.getElementById(&b&).&&&&//&获取&id&为&c&的输入框的值&&&&var&c&=&&标题大小:&&+&document.getElementById(&c&).&&&&//&将获取到的值加入到&id&为&e&的元素里面&&&&document.getElementById(&e&).innerHTML&=&a&+&&&&+&b&+&&&&+&c;}
采纳率：100%
&html&&head&
&title&无标题页&/title&
&style type=&text/css&&
border-width:2
border-collapse:
border-color:Y
border-style:
border-width:2
border-collapse:
border-color:Y
border-style:
&/style&&/head&&body&
&table width=&600& height=&400& border=&2& cellpadding=&0& cellspacing=&0& class=&tb&&
&td&&&/td&
&td&&&/td&
&td&&&/td&
&td&&&/td&
&td&&&/td&
&td&&&/td&
&td&&&/td&
&td&&&/td&
&td&&&/td&
&/div&&/body&&/html&
本回答被提问者和网友采纳
加个&就好了&table width=&1& ....(以下省略）&
&td style=&background-color:gray&&&&/td&
&td style=&background-color:gray&&&&/td&
&td&单元格内有文字，无背景&/td&
&td&单元格内有文字，无背景&/td&
&/tr&&/table&
为您推荐：
其他类似问题
您可能关注的内容
html代码的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。【图文】第四讲：HTML实现表格_百度文库
您的浏览器Javascript被禁用，需开启后体验完整功能，
享专业文档下载特权
&赠共享文档下载特权
&10W篇文档免费专享
&每天抽奖多种福利
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
第四讲：HTML实现表格
&&HTML实现表格
阅读已结束，下载本文到电脑
想免费下载本文？
登录百度文库，专享文档复制特权，积分每天免费拿！
你可能喜欢浏览(6533)
html 代码 ,怎么将文本/ 图片居中？
html文字居中和html图片居中方法代码，通过在html中实现文字居中图片居中篇在html中实现文字图片内容居中有三种方法，其中两种使用CSS样式实现，一直使用原始的html标签内加入“align=&center&”（居中）实现。
一、对body加CSS居中样式
我们直接对 设置CSS样式：1、完整HTML实例代码：
&!DOCTYPE html&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta charset=&gb2312& /&
&title&W3Cschool居中实例&/title&
body{text-align:center}
W3Cschool会被居中
2、居中实例截图
对body设置居中实现文字或图片居中截图
二、对文字外层对象加css居中样式
首先我们CSS命名 为“.w3cschool”,对此选择器内加居中样式。我们实例演示2个DIV对象，一个放文字一个放图片。1、对应CSS代码如下：
.w3cschool{text-align:center}
2、完整HTML+DIV+CSS代码如下：
&!DOCTYPE html&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta charset=&gb2312& /&
&title&W3Cschool居中实例&/title&
.w3cschool{text-align:center}
&div class=&w3cschool&&W3Cschool会被居中&/div&
&div class=&w3cschool&&&img src=&http://statics.w3cschool.cn/images/w3c/logo.png& /&&/div&
3、CSS实现对象内图片和文字居中效果截图
实现html文字居中-html图片居中实例截图
三、之间对文字外层对象加align=&center&
此方法是以前较为常见的方法，直接在html标签内使用align=&center&即可实现对象内图片或文字内容实现居中。我们实例演示HTML表格里居中与一般HTML标签内内容居中。
1、完整HTML源代码：
&!DOCTYPE html&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta charset=&gb2312& /&
&title&html align居中-W3Cschool&/title&
&div align=&center&&W3Cschool会居中的&/div&
&table width=&100%&&
&td align=&center&&表格中居中&/td&
2、实例效果截图
html文字居中， 表格内文字居中实现截图
直接在标签内使用align属性，方便实践普通 和 内使用“align=&center&”居中代码实现对象内内容居中。
父级元素width:100%,子集元素margin:0
父级元素width:100%,子集元素margin:0
或者“align=&center&属性
留名留名!!!,同样的问题,看看咋结局!!!
有同样等问题咋解决,只能慢慢等大神啦.留名留名。。
这个领域不太懂!! 还是坐等大佬吧...
最后三条评论一看就是刷的
父级元素width:100%,子集元素margin:0或者“align=&center&属性
广告等垃圾信息
不友善内容
违反法律法规的内容
不宜公开讨论的政治内容
微信号：w3cschoolcn
意见反馈：
联系方式：