css网页布局小练习,文字案例,小米官网卡片案例
1、网页排版
目标效果图如下:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>新闻网页案例练习</title><style>div {width: 800px;height: 440px;background-color: white;margin: 0 auto;}h1 {/* 大标题居中 */text-align: center;}/* p{text-align: center;} 不这么写,因为下面还有其他的段落,这些段落不需要居中*//* 用 类选择器 设置段落居中 */.center {text-align: center;}/* 通过使用 类选择器,实现对一行内的目标文字进行特殊设置 */.color1 {color: #808080;}.color2 {color: #87ceeb;font-weight: 700;}a {text-decoration: none;}/* 段落内的首行缩进 */.suojin {text-indent: 2em;}</style>
</head><body><div><h1>《自然》评选改变科学的10个计算机代码项目</h1><p class="center"><!-- 2077年01月28日14:58 新浪科技 收藏本文 这些文字要一行显示,就得使用span标签,<div></div>标签默认独占一行 --><span class="color1">2077年01月28日14:58</span><span class="color2"> 新浪科技</span><a href="#">收藏本文</a></p><hr><p class="suojin">2019年,事件视界望远镜团队让世界首次看到了黑洞的样子。不过,研究人员公布的这张发光环形物体的图像并不是传统的图片,而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据,研究人员进行了数学转换,最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码,并撰文记录这一发现,其他研究者也可以在此基础上进一步加以分析。</p><p class="suojin">这种模式正变得越来越普遍。从天文学到动物学,在现代每一项重大科学发现的背后,都有计算机的参与。美国斯坦福大学的计算生物学家迈克尔·莱维特因“为复杂化学系统创造了多尺度模型”与另两位研究者分享了2013年诺贝尔化学奖,他指出,今天的笔记本电脑内存和时钟速度是他在1967年开始获奖工作时实验室制造的计算机的1万倍。“我们今天确实拥有相当可观的计算能力,”他说,“问题在于,我们仍然需要思考。”</p><p class="suojin">如果没有能够解决研究问题的软件,以及知道如何编写并使用软件的研究人员,一台计算机无论再强大,也是毫无用处的。如今的科学研究从根本上已经与计算机软件联系在一起,后者已经渗透到研究工作的各个方面。近日,《自然》(Nature)杂志将目光投向了幕后,着眼于过去几十年来改变科学研究的关键计算机代码,并列出了其中10个关键的计算机项目。</p><p class="suojin">最初的现代计算机并不容易操作。当时的编程实际上是手工将电线连接成一排排电路来实现的。后来出现了机器语言和汇编语言,允许用户用代码为计算机编程,但这两种语言都需要对计算机的架构有深入的了解,使得许多科学家难以掌握。20世纪50年代,随着符号语言的发展,特别是由约翰·巴克斯及其团队在加州圣何塞的IBM开发的“公式翻译”语言Fortran,这种情况发生了变化。利用Fortran,用户可以用人类可读的指令来编程,例如x= 3 + 5。然后由编译器将这些指令转换成快速、高效的机器代码。</p></div>
</body></html>
2、小米官网卡片案例
效果图如下图所示:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小米官网卡片案例</title><style>body {background-color: #f5f5f5;}.goods {width: 234px;height: 300px;background-color: #fff;/* 让标签居中,像div p h 等等这些盒子居中 */margin: 0 auto;/* 图片属于这个盒子的一部分,让盒子内的内容居中,使用下面语句 */text-align: center;}img {width: 160px;}.title {font-size: 14px;line-height: 25px;}/* 产品详情 */.info {color: #ccc;font-size: 12px;line-height: 30px;}.money {font-size: 14px;color: #ffa500;}</style>
</head><body><!-- div 用来网页布局,一个页面可能使用无数次 --><!-- 原则:如果使用div,尽量使用类名控制样式 --><div class="goods"><img src="../1.案例/images/car.jpg" alt=""><div class="title">九号平衡车</div><div class="info">成年人的玩具</div><div class="money">1999元</div></div></body></html>
css网页布局小练习,文字案例,小米官网卡片案例相关推荐
- css网页布局中文字排版的属性和用法
前段时间,学习了几个大的网站的图文混排的方法.今天总结下, css网页布局中文字排版的相关属性以及用法 .包括:设定字体.颜色.大小.段落空白,首字下沉.首行缩进.中文字的截断.固定宽度词内折行(wo ...
- 南大软院大神养成计划--CSS网页布局
学习小结 今天主要学习了CSS样式设置小技巧和CSS网页布局. 网页主要元素是图片和文字,网页的基本布局就是CSS样式将块与块不同的摆放.对一些元素设置它的水平位置,垂直位置,最终达到目的. 比如说水 ...
- python学习 day49之CSS网页布局
CSS网页布局 一 网页布局方式 二 标准流 三 浮动流 什么是脱离文档流? 浮动元素脱标文档流意味着 注意点: 让两个元素显示到一行的 两种实现方式 方式一:修改显示方式为inline-block ...
- 054.CSS网页布局
文章目录 一.网页布局方式 二.标准流 三.浮动流 (一)浮动流相关概念 1.什么是浮动流? 2.什么是脱离文档流? 3.什么是半脱离文档流? (二)如何使用浮动流 1.浮动元素贴靠问题 2.浮动元素 ...
- week9 day4 CSS网页布局
week9 day4 CSS网页布局 一.网页布局方式 二.标准流 三.浮动流 3.1 什么是脱离文档流? 3.2 什么又是半脱离文档流 3.3 浮动元素贴靠问题 3.4 浮动元素字围现象 3.5 浮 ...
- JavaWeb:(练习)三、HTML与CSS网页布局练习
JavaWeb:(练习)三.HTML与CSS网页布局练习 JavaWeb:(练习)三.HTML与CSS网页布局练习 一.完成网页布局(参考图片) 1.练习目标 2.HTML代码 3.CSS代码 4.网 ...
- web前端 --- CSS(04) -- 盒子模型、div+css网页布局、css3新特性
盒子模型 (1)网页标签分类: 行内元素: 块级元素:有宽高,可以设置大小,同时不会让其他块元素默认占据当前行 (2)内边距: 内容和边线之间存在空白区域,空白区域被称为:内边距(padding) 盒 ...
- 结合HTML5的语义化标签,运用DIV+CSS网页布局技术设计一个个人博客页面
** CSS+DIV页面布局 ** 结合HTML5的语义化标签,运用DIV+CSS网页布局技术设计一个个人博客页面.要求: (1)header标签定义页面头部区:nav标签定义导航区:div标签定义中 ...
- 前端学习笔记之CSS网页布局
CSS网页布局 阅读目录 一 网页布局方式 二 标准流 三 浮动流 四 定位流 一 网页布局方式 #1.什么是网页布局方式 布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如wor ...
最新文章
- 慢保刚办下来如何使用_在科目二离合和方向没学好的学员如何备考科目三?
- linux下cat命令详解
- 四个人过桥的题目_云南的几种“勾魂”特产,舌尖上的美味,让人回味无穷,你吃过吗...
- C++学习之路 | PTA乙级—— 1064 朋友数 (20 分)(精简)
- Nginx基本数据结构之ngx_str_t
- 根据控制点坐标对完成坐标转换
- [转]Git使用基础篇
- Chromium学习笔记
- linux笔记:shell编程-正则表达式
- C# 多线程七之Parallel
- 如何防止CSRF攻击?
- 2019商业数据分析软件有哪些
- 二广高速公路4标段道路设计--武汉理工大学本科生毕业设计
- 《机器学习与计算力学的结合及应用初探 》论文学习
- 基于RFID定位技术下的机房资产管理系统,RFID资产管理解决方案--新导智能
- 用python刷网页浏览量_Python 刷网页访问量
- 用Flutter实现小Q聊天机器人(二)
- element-ui快速使用(使用element-ui做一个表格)
- 没学过python、但是还是有公司要-为什么自学Python看不进去?
- 算法拾遗三十一马拉车算法