登陆 注册

html文章布局之《css禅意花园》

守望者 2020-04-05 495人围观 ,发现2个评论 htmlcss

       用html写一篇文章并不难,但是大多数人都忽略的文章的布局,这里的布局不是指文章排版的布局,而是文章html结构布局。

下面我们将通过html5的新增元素完善文章布局,增强文章的语义性和对搜索引擎的友好性。


最终实现如下效果:

html文章布局之《css禅意花园》效果图


html部分:


     做一个文章首先我们需要一个包含框来包含我们的整个文章,有的人就会想到用div,虽然也可以,但是既然html5引入了新元素,我们就应当尝试着用,有益无害。

这里用artitle元素,html5专为文章之类的设计的元素,用这个会增强文章的语义性,对搜索引擎是有好的。

当然,如果你想为article元素设计css样式,不建议直接操作article元素,最好在外面再套个div元素:


<article id="css">   </article>


    这篇文章有两个标题,一个主标题,一个副标题,显然,我们需要用到 h1,h2 元素,同时外面再套上<hgroup>元素,将这两个打包成一个标题组,增强语义性。

甚至,还可以在外面再套个div包含框,与后面的文章内容结构保持并列:


        <div class="header">
        
			 <hgroup>
                 <h1>css 禅意花园</h1>		
			     <h2>CSS设计之美</h2>
			     //   ......
			 </hgroup>                   	
                
	</div>


在header包含框里面加上作者,联系方式等信息,这里用address标签,这是专为文章或文档附带相关辅助信息的标签:


    <address>发布自:兔峰博客</address>


          随后加上发布时间,这里用time标签,这是html5专为表示时间设计的新元素,其中,

   datatime属性里面写时间值,这是给搜索引擎看的,

   pubdate属性为true时表示这个表示文章或其他文档的发布时间,如果是发布时间加上pubdate属性对搜索引擎将更加友好,

   time里面的内容就是我们编辑的给读者看的时间内容:


<time datetime="2020-4-5" pubdate="true">发布时间:2020年4月5日</time>



   纵览文章的主体部分,我们可以看到文章有多个小标题,每个小标题后面跟n个自然段,

这些加在一起构成一个有机整体,用来表示一个分段思想。为了增强语义性,这里不用div标签,

而用section元素,section元素是用来表示具有相对独立性的能够独立表达出一个相对独立完整思想或观点的元素。

而且每个section元素后面需要跟一个h标题,其后再跟其他内容:


<section>
				<h3>启蒙之路</h3>
				
				<p >在黑暗和沉闷的道路上乱扔垃圾是过去遗留下来的浏览器特有的标签,不兼容的DOMS,破碎的CSS支持,以及废弃的浏览器。
                <p>我们必须澄清过去的想法。Web启蒙已经通过W3C、WASP和主要浏览器创作者等不懈的努力实现。</p>
				<p>CSS禅园邀请你放松和沉思大师们的重要课程。开始清晰地看到。学会在新的、充满活力的时尚中运用古老的技术。成为一个与网络。</p>

			</section>


CSS部分:


    设计文章背景色渐变,从左上角至右下角依次从红向黄,绿渐变:

body{
				
	background:radial-gradient(circle at 100px 100px,rgba(255,0,0,0.8) , yellow , green );
 }


    调整文章,各标题的左边距:


                     article{
				margin-left: 1em;
			}
           
			
			h1{
			   font-size: 2em;
			   text-transform: uppercase;
			}
			h2{margin-left: 8em;}
			h3{margin-left: 2em;}


     用css选择器设计文章第一个分块的第一个自然段的第一个字的样式:


#css section:first-of-type p:first-of-type:first-letter{
				background-color: #666666;
				color: #dddd;
				font-size: 2.5em;
				font-weight: bold;
				line-height: 1em;
				margin-top: 0;
			}


     图片向左浮动放置到文章左边,并设计背影效果:


			img{<!--border: solid 3px #ffffff;-->
				width: 300px;
				height: 300px;
				border-radius: 5%;
				box-shadow: 16px 16px 80px #000000;   
				margin:10px 50px;
				float: left;
			}


    全部实力代码如下(图片请自行替换):


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css zen garden</title>
		
		<style type="text/css">
			body{
				background-color: orange;
				
				/* background: linear-gradient(to right bottom ,rgba(255,0,0,0.8) , yellow , green); */
				background:radial-gradient(circle at 100px 100px,rgba(255,0,0,0.8) , yellow , green );
				
				background-size: 100%;
				background-position: left top;
                
				color: #333333;
				font-family: "新宋体",sans-serif;
				font-size: 16px;
				margin: 0;
				padding: 0;
			}
             
            div.header{
                text-align: center;
                margin-bottom: 50px;
            }
			article{
				margin-left: 1em;
			}
           
			
			h1{
			    font-size: 2em;
			   text-transform: uppercase;
			}
			h2{margin-left: 8em;}
			h3{margin-left: 2em;}
			
			#css section:first-of-type p:first-of-type:first-letter{
				background-color: #666666;
				color: #dddd;
				font-size: 2.5em;
				font-weight: bold;
				line-height: 1em;
				margin-top: 0;
			}
			p{
				margin: 1em;
				line-height: 1.4em;
				text-indent: 2em;
			
				}
			img{
				<!--border: solid 3px #ffffff;-->
				width: 300px;
				height: 300px;
				border-radius: 5%;
				box-shadow: 16px 16px 80px #000000;   
				margin:10px 50px;
				float: left;
			}
			div.lm{
				border-radius: 25px;
				background-color: #666666;
				padding-top: 5px;z
			}
			div.lm div{
				height: 90%;
				margin-top: 10px;
				border-bottom-left-radius: 25px;
				border-bottom-right-radius: 25px;
				background-color: rgb(232,232,196);
			}
			
			
			
		
		</style>
	</head>
	<body>
		
		<article id="css">
            
			<div class="header">
			 <hgroup>
              <h1>css 禅意花园</h1>		
			  <h2>CSS设计之美</h2>
			  </hgroup>
           
            	<address>发布自:兔峰博客</address>
            	<time datetime="2020-4-5" pubdate="true">发布时间:2020年4月5日</time>
            
			<p id="sumary">通过基于CSS的设计可以实现什么样的演示。从列表中选择任何样式表将其加载到此页中。
                下载示例<a title="click to know more about it" href="https://www.2345.com/tg31690.htm" target="_blank"> HTML 文件</a> and <a title="click to know more about it">CSS 文件</a>
            </p>

			<img src="a.jpg"/>
                
			</div>
            
			<section>
				<h3>启蒙之路</h3>
				
				<p >在黑暗和沉闷的道路上乱扔垃圾是过去遗留下来的浏览器特有的标签,不兼容的DOMS,破碎的CSS支持,以及废弃的浏览器。
                <p>我们必须澄清过去的想法。Web启蒙已经通过W3C、WASP和主要浏览器创作者等不懈的努力实现。</p>
				<p>CSS禅园邀请你放松和沉思大师们的重要课程。开始清晰地看到。学会在新的、充满活力的时尚中运用古老的技术。成为一个与网络。</p>

			</section>
			
			<section>
				<h3>这是关于什么的?</h3>
				
				<p >有持续的需要显示CSS的力量。禅宗花园旨在激发、激励和鼓励参与。首先,查看列表中的一些现有设计。点击任何一个都会把样式表加载到这个页面中。HTML保持不变,唯一改变的是外部CSS文件。是的,真的。</p>
				<p>CSS允许对超文本文档的样式进行完全和完全控制。唯一能让人们兴奋的方式是通过展示那些真正能够成为现实的人,一旦缰绳放在那些能够从结构中创造美的人手中。设计师和程序员都对网络的美做出了贡献,我们可以继续推动它。</p>
			</section>
			
			<section>
				<h3>参与</h3>
				
				<p >强大的视觉设计一直是我们关注的焦点。你正在修改这个页面,如此强大CSS技能也是必要的,但是示例文件注释得足够好,甚至CSS新手可以用它们作为起点。请看CSS资源指南用于高级教程和工作技巧CSS.</p>
				<p>您可以按照您希望的任何方式修改样式表,但不需要HTML. 如果你以前从来没有这样做过,这可能会让人望而生畏,但是要遵循列出的链接来学习更多的内容,并使用示例文件作为指导。</p>
				<p>下载样品HTML和CSS在本地进行拷贝。一旦你完成了你的杰作(请不要提交半成品)上传你的作品。CSS文件到您的控件下的Web服务器。给我们一个链接到该文件和所有相关资产的存档,如果我们选择使用它,我们将下载它并把它放在我们的服务器上。</p>
				
			</section>
			
			<section>
				<h3>收益</h3>
				
				<p >为什么要参加?为了识别,灵感和资源,我们都可以告诉人们多么神奇CSS真的可以。这个网站为今天在网络上工作的人提供了同样的灵感,为明天的学习者提供工具,以及我们可以期待的未来技术的画廊。</p>
				
			</section>
			
			<section>
				<h3>要求</h3>
				
				<p>在可能的情况下,我们希望看到的主要是CSS 1和2用法。CSS 3和4应仅限于广泛支持的要素,或应提供强有力的回退。CSS禅园是实用的,实用的。CSS而不是最新的出血边缘技巧可以看到2%的浏览公众。我们唯一的真正要求就是CSS验证。</p>
				<p>幸运的是,设计这种方式显示了各种浏览器的执行情况。CSS到现在为止。当遵循指南时,你应该会看到大多数现代浏览器都有相当一致的结果。由于现在网络上用户代理的数量非常多——特别是当你在移动中使用像素时,完美的布局在每个平台上都是不可能的。没关系,但是尽可能多地测试。您的设计应该至少在IE9+和最新的Chrome、Firefox、iOS和Android浏览器中运行(超过90%的人口运行)。</p>
				<p>我们要求你提交原创作品。请尊重版权法。请将讨厌的材料保持在最低限度,并尝试将独特而有趣的视觉主题融入到作品中。我们已经超过了需要另一个花园相关设计的要点。</p>
				<p>这是一个学习练习,也是一个演示。您保留您的图形上的完全版权(只有有限的例外),请参见提交指南,但是我们要求你释放CSS在创作共享许可证下这个网站上的一个这样别人就可以从你的工作中学到东西。</p>
				
			</section>
		</article>
		
	</body>
</html>


   转载请附上本文链接:https://tufeng.xyz/htmlcss/40.html,谢谢合作!


已有2条评论
  • 2020-04-05 12:13:27

    文章布局学习了,谢谢大佬分享!

  • 2020-04-05 12:14:17

    布局看起来还是比较美观的

请关注微信公众号
微信二维码