HTML与CSS回顾

Html基础

https://blog.csdn.net/zhouhe_/article/details/114926609

CSS基础

https://blog.csdn.net/zhouhe_/article/details/115250336

人物简介demo

HTML

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>人物简介</title><link rel="stylesheet" href="description.css">
</head>
<body><!--人物简介-->
<div class="container"><!--  顶部title  --><div class="title"><h1>人物简介---吴彦祖</h1></div><!--  导航栏  --><div class="nav"><a href="#basic-info">基本信息</a><a href="#basic-actor">演艺经历</a><a href="#basic-record">获奖记录</a><a href="#basic-social">社会活动</a><a href="#basic-solaiton">联系方式</a></div><!--  媒体信息  --><div class="media"><img src="https://img2.baidu.com/it/u=3336483108,1689993972&fm=26&fmt=auto&gp=0.jpg" alt=""><img src="https://img1.baidu.com/it/u=2015534170,964260099&fm=26&fmt=auto&gp=0.jpg" alt=""></div><!--  基本信息  --><div class="basic" id="basic-info"><h2>基本信息</h2><p>吴彦祖（Daniel Wu），1974年9月30日出生于美国旧金山，华语影视男演员、导演、制片人，毕业于美国俄勒冈大学。1998年，因出演个人首部电影作品《美少年之恋》进入演艺圈；同年，凭借文艺片《玻璃之城》提名第18届香港电影金像奖最佳新演员。2001年，主演文艺片《游园惊梦》。2003年，首次担任监制并主演了惊悚片《妖夜回廊》，凭该片首次提名第40届台湾电影金马奖最佳男主角。2004年，因出演 .</p></div><div class="basic"id="basic-actor"><h2>演艺经历</h2><table border="1"><tr><th>时期</th><th>经历</th></tr><tr><td>2011年3月</td><td>吴彦祖与冯德伦合作创立了突围映画电影制作公司</td></tr><tr><td>2012年5月4日</td><td>由伍仕贤执导的剧情片《形影不离》上映</td></tr><tr><td>2013年11月22日</td><td>吴彦祖担任监制并主演的犯罪动作片《控制》上映</td></tr><tr><td>2014年4月18日</td><td>与张家辉领衔主演的悬疑犯罪片《魔警》上映</td></tr><tr><td>2015年8月13日</td><td>搭档白百何主演的励志喜剧片《滚蛋吧！肿瘤君》上映</td></tr></table></div><div class="basic" id="basic-record"><h2>获奖记录</h2><table border="1"><tr><th>时间</th><th>获奖</th></tr><tr><td> 2018-1-6</td><td>英国皇家建筑师学会奖</td></tr><tr><td> 2015-02  </td><td>第34届香港电影金像奖最佳男主角奖</td></tr><tr><td> 2007-04</td><td>第26届香港电影金像奖新晋导演奖</td></tr><tr><td>2005-04 </td><td> 第18届香港电影金像奖最佳新演员奖</td></tr><tr><td>2005-04</td><td>第24届香港电影金像奖最佳男配角奖</td></tr></table></div><div class="basic" id="basic-social"><h2>社会活动</h2><p>2006年底，在中国香港“SuperStars”影展及摄影集慈善义卖活动上，余文乐、吴彦祖、郭富城等300多位明星为慈善活动所拍摄的裸照曝光 [68]  。</p><br><p>吴彦祖（Daniel Wu），1974年9月30日出生于美国旧金山，华语影视男演员、导演、制片人，毕业于美国俄勒冈大学。1998年，因出演个人首部电影作品《美少年之恋》进入演艺圈；同年，凭借文艺片《玻璃之城》提名第18届香港电影金像奖最佳新演员。2001年，主演文艺片《游园惊梦》。2003年，首次担任监制并主演了惊悚片《妖夜回廊》，凭该片首次提名第40届台湾电影金马奖最佳男主角。2004年，因出演 .</p><br><p>2009年2月，吴彦祖为四川地震灾区彭州小鱼洞的群众修建永久性房屋；5月10日，吴彦祖参加了“壹家人壹起走——纪念5.12汶川行”活动 [70]  ；7月6日，吴彦祖向四川地震灾区出资捐建5间房屋，并且表示每年都会抽出几次时间去四川探访 [71-72]  ；9月20日，吴彦祖携手吴君如在香港出席了“仁人家园义工周”的公益活动 [73]</p><br><p>2013年11月1日，“2014爱·家庭慈善月历”在香港推出，包括吴彦祖等在内的12个明星家庭齐心推动此公益活动 [74]  。        </p></div><div class="bottom-basic" id="basic-solaiton"><h2>联系方式</h2><span class="solation">请将你想告诉我的话发送至我的邮箱</span><textarea name="吴彦祖" id="1" cols="30" rows="10"></textarea><button>提交</button></div><a href="#" id="return-top">返回顶部</a><div class="rightCopy">©2021 Baidu 使用百度前必读 | 百科协议 | 隐私政策 | 百度百科合作平台 | 京ICP证030173号</div></div></body>
</html>

CSS

*{margin: 0;padding: 0;
}
.container{margin: 0 15%;background: #d1d4d2f5;
}
.title{background: dodgerblue;color: #333;height: 70px;
}
.title h1{margin-left: 60px;line-height: 70px;color: white;
}
.nav{width: 500px;display: flex;flex-direction: row;margin: 20px auto;}
.nav a{width: 100px;height: 25px;border: 1px solid dodgerblue ;background: dodgerblue;text-decoration: none;border-radius: 0 20%;color: white;font-weight: lighter;text-align: center;
}
.nav a:hover{text-decoration: underline;
}
.nav a+a{margin-left: 8px;
}
.media{display: flex;margin: 15px 10%;
}
.media img{width: 200px;}
.media img:first-child{margin-right: 60px;
}
.media img:last-child{flex: 1;
}.basic{margin: 15px 9%;
}
.basic h2{margin-bottom: 10px;
}
.basic p{text-indent: 2em;text-align: justify;
}.basic table{border-collapse: collapse;border-color: black;
}
.bottom-basic{margin: 15px 9%;display: flex;flex-direction: column;
}
.bottom-basic .solation{margin:  15px 50px;
}
.bottom-basic textarea{border: 1px solid cadetblue;outline: none;
}
.bottom-basic button{width: 50px;}
#return-top{display: block;color: purple;text-decoration: none;width: 80px;margin: 0 auto;}
.rightCopy{height: 70px;line-height: 70px;color: white;background: dodgerblue;text-align: center;
}

HTML与CSS回顾相关推荐

CSS回顾总结（二）——伪类、伪元素、子元素和后代元素选择器、盒子模型
目录伪类伪元素子元素和后代元素选择器盒子模型边距边框边框样式内联元素盒子模型伪类伪类:专门用来表示元素的一种特殊状态 * 比如:访问过的超 ...
福利 | 抽奖送现金送书《Web前端工程师修炼之道》
很多关注了我的公众号的粉丝可能都不知道我,趁这次机会简单介绍下. 你好,我是若川.江西人,某不那么知名的陶瓷大学毕业生,目前在杭州从事前端开发工作.常以若川为名混迹于江湖.更详细的可以点击关于我我历 ...
前端html css3修炼之道,Web前端工程师修炼之道（原书第5版）
Web前端工程师修炼之道(原书第5版) 作者:(美)珍妮弗·尼德斯特·罗宾斯(Jennifer Niederst Robbins) 著出版日期:2020年10月文件大小:179.64M 支持设备: ...
用计算机做表格的超链接,计算机基础13 表格嵌套及超链接.pptx
HTML&CSS回顾表格标记课程知识拓扑图本次课内容表格嵌套超链接标记本次课知识点的作用本次课是HTML课程的重点之一,通过学习超链接,完成页面的导航功能,同时通过对表格嵌套的学习,学会制作完 ...
【文末抽奖送书】新年礼物《Web前端工程师修炼之道》
随着多设备.浏览器和Web标准的演变革命,前端正在成为兼顾逻辑.性能.交互.体验的综合性岗位. 前端开发入门又相对容易,必须掌握的HTML+CSS+JS非常容易学习,如果你能再了解一定后端知识,对业务 ...
Web前端开发敲门砖 ——《Web前端工程师修炼之道》
随着多设备.浏览器和Web标准的演变革命,前端正在成为兼顾逻辑.性能.交互.体验的综合性岗位. 前端开发入门又相对容易,必须掌握的HTML+CSS+JS非常容易学习,如果你能再了解一定后端知识,对业务 ...
前端知识点回顾——HTML，CSS篇
前端知识点回顾篇--是我当初刚转行为了面试而将自己学过的前端知识整理成的一份笔记,个人目的性很强,仅供参考. doctype 有什么用 doctype是一种标准通用标记语言的文档类型声明,目的是告诉标 ...
html css 知识回顾2
在学习代码期间,练习代码是必不可少的内容,同样的对知识点的回顾也是更加重要的,在练代码的同时回顾知识点效果会更好.(知识会有重复的,我遵循的是不论是什么时候的知识都会从头来一遍,对于新掌握的我会再单独 ...
pyc php js echarts css 数据挖掘感悟 2016.05.24回顾
昨天做的工作和学的东西都很多很宽泛,节奏不能乱,需要好好总结,每一个知识点,繁杂的事物中理清头绪. 我views.py会import一个A.py,我修改A.py直接覆盖掉不重启服务,没生效,还是跑的以 ...
CSS知识回顾（10）
知识回顾 CSS3思维导图 3D转换透视perspective 3D旋转 CSS移动端 background 特殊样式来源博客:u.mr90.top CSS3思维导图 3D转换 x右面为正,左边为 ...

HTML与CSS回顾

Html基础

CSS基础

人物简介demo

HTML与CSS回顾相关推荐

最新文章

热门文章