图文展示网页设计

最新推荐文章于 2023-12-26 02:24:17 发布
最新推荐文章于 2023-12-26 02:24:17 发布
阅读量805 收藏 3
点赞数
分类专栏： H5+CSS3 文章标签： html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fantasy_geek/article/details/104978529
版权

练习一：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS3 圆角边框</title>
	<style>
		body {
			padding: 0;
			background-color: #F7F7F7;
		}
		div{
			margin:20px;
			float: left;
		}
		/*饼环*/
		.border-radius {
			width: 40px;
			height: 40px;
			border: 70px solid #93baff;
			border-radius: 90px;
		}
		/*四边不同色*/
		.border-radius1 {
			width: 0px;
			height: 0px;
			border-width: 90px;
			border-style: solid;
			border-color: #ff898e #93baff #c89386 #ffb151;
		}
	</style>
</head>
<body>
	<div class="border-radius"></div>
	<div class="border-radius1"></div>
</body>
</html>

在这里插入图片描述
练习二：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div{
			width: 100px;
			height: 100px;
			margin: 0 auto;
			background: green;
			transition: all 3s ease;
		}
		div:hover{
			background-color: hotpink;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

在这里插入图片描述
练习三：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body{
			background-color: deepskyblue;
		}
		p{
			text-align: center;
			font-size: 100px;
			color: rgba(255,255,255,0.3);
			letter-spacing: 30px;
			transition: all 2s ease-in-out;
		}
		p:hover{
			color: rgba(255,255,255,1);
			letter-spacing: 0;
		}
		.dong{
			color: rgba(255,255,255,1);
			letter-spacing: 0;
		}
	</style>
</head>
<body>
	<p>4亿网友共同信赖</p>
	<button>动起来</button>
	<script type="text/javascript">
		var btn=document.querySelector('button');
		var p= document.querySelector('p');
		btn.onclick=function(){
			p.classList.add('dong');
		}
	</script>
</body>
</html>

在这里插入图片描述

在这里插入图片描述
练习四：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			border: 0;
			margin: 0;
			padding: 0;
		}
		.juxing_one,.juxing_two{
			width: 120px;
			height: 120px;
		}
		.juxing_one{
			position: relative;
			top: 120px;
			left: 120px;
		}
		.juxing_two{
			position: absolute;
			left: 550px;
		}
		.juxing_one div,.juxing_two div{
			float: left;
		}

		.juxing_one .tl{
			width: 0;
			height: 0;
			border-top: 30px solid #92D14F;
			border-left: 30px solid #92D14F;
			border-right: 30px solid #FFFF00;
			border-bottom: 30px solid #FFFF00;
		}
		.juxing_one .tr{
			width: 0;
			height: 0;
			border-top: 30px solid #FE0000;
			border-left: 30px solid #0071C1;
			border-right: 30px solid #FE0000;
			border-bottom: 30px solid #0071C1;
			
		}
		.juxing_one .bl{
			width: 0;
			height: 0;
			border-top: 30px solid #000000;
			border-left: 30px solid #6F30A2;
			border-right: 30px solid #000000;
			border-bottom: 30px solid #6F30A2;
		}
		.juxing_one .br{
			width: 0;
			height: 0;
			border-top: 30px solid #FFFFFF;
			border-left: 30px solid #FFFFFF;
			border-right: 30px solid #01B0F1;
			border-bottom: 30px solid #01B0F1;
		}
        .juxing_two .tl{
			width: 0;
			height: 0;
			border-top: 30px solid #F80302;
			border-left: 30px solid #70AD46;
			border-right: 30px solid #F80302;
			border-bottom: 30px solid #70AD46;
		}
		.juxing_two .tr{
			width: 0;
			height: 0;
			border-top: 30px solid #44546C;
			border-left: 30px solid #44546C;
			border-right: 30px solid #FFFF00;
			border-bottom: 30px solid #FFFF00;
			
		}
		.juxing_two .bl{
			width: 0;
			height: 0;
			border-top: 30px solid #6C31A3;
			border-left: 30px solid #6C31A3;
			border-right: 30px solid #012060;
			border-bottom: 30px solid #012060;
		}
		.juxing_two .br{
			width: 0;
			height: 0;
			border-top: 30px solid #FFBF05;
			border-left: 30px solid #01B0F1;
			border-right: 30px solid #FFBF05;
			border-bottom: 30px solid #01B0F1;
		}
		#wujiao { 
			width: 0;
			height: 0; 
			margin: 300px 300px;
			position: relative;
			border-right: 100px solid transparent; 
			border-bottom: 70px solid #5A9BD5;
			border-left: 100px solid transparent;  
			-moz-transform: rotate(35deg); 
			-webkit-transform: rotate(35deg); 
			-ms-transform: rotate(35deg);
			-o-transform: rotate(35deg);
		}
		#wujiao:before { 
			width: 0;
			height: 0; 
			position: absolute; 
			display:block;
			top: -45px;
			left: -65px; 
			border-bottom: 80px solid #5A9BD5;
			border-left: 30px solid transparent; 
			border-right: 30px solid transparent;  
			content: '';
			-webkit-transform: rotate(-35deg); 
			-moz-transform: rotate(-35deg);
			-ms-transform: rotate(-35deg); 
			-o-transform: rotate(-35deg);
			}
		#wujiao:after {    
			width: 0;
			height: 0;
			position: absolute; 
			display:block;
			top: 3px;    
			left: -105px;
			border-right: 100px solid transparent; 
			border-bottom: 70px solid #5A9BD5;
			border-left: 100px solid transparent;    
			content: ''; 
			-webkit-transform: rotate(-70deg); 
			-moz-transform: rotate(-70deg); 
			-ms-transform: rotate(-70deg); 
			-o-transform: rotate(-70deg);
			}
	</style>
</head>
<body>
	<div class="juxing_one">
		<div class="tl"></div>
	    <div class="tr"></div>
	    <div class="bl"></div>
	    <div class="br"></div>	    
	</div>
	<div class="juxing_two">
		<div class="tl"></div>
	    <div class="tr"></div>
	    <div class="bl"></div>
	    <div class="br"></div>
	</div>
	<div id="wujiao"></div>
</body>
</html>

在这里插入图片描述
练习五：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.heart{
			position: relative;
			left: 100px;
			top: 100px;
			width: 300px;
			height:300px;
			transform: rotate(45deg);
			background: red;
		}
		.heart:before,.heart:after{
			position: absolute;
			display: block;
			content: '';
			width: 300px;
			height: 300px;
			border-radius: 100%;
			background: red;
		}
		.heart:before{
			left: -50%;
			top:0;
		}
		.heart:after{
			right: 0;
			top:-50%;
		}
	</style>
</head>
<body>
	<div class="heart"></div>
</body>
</html>

在这里插入图片描述

任由天高
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
如何设计一个图文并茂的页面
时光刻下的容颜
07-29 2460
炎炎夏日，知了声声叫着夏天的童年早已不复存在，想起远方的诗行为梦想助航。在清爽的宝地敲响一行行代码，顿时觉得编程真的挺好玩，跳动的音符堪比优美的旋律。        很有感触就是在项目成成长，不仅仅是代码的属性、代码量的积累还有团队合作、相互进步，不妨亲临体验获得向日葵的微笑。        最近在一个金银珠宝玉石饰品质量监督检查站的网站项目，还算比较有成就的把组长分配的模块做好了。一次开会中
图文展示信息网页模板
01-22
【图文展示信息网页模板】是一种专门用于呈现图文信息的网页设计模式，广泛应用于网站、博客、产品展示、新闻报道等多种场景。这样的模板通常包含精心设计的布局，将图像与文字结合，以吸引用户注意力，清晰地传达...
5.3 图文类网页设计
m0_62460019的博客
06-12 210
其中，length或%用于设置对象的圆角形状，不可为负值。如果省略 bottom-left，则与top-right 相同，如果省略 bottom-right，则与top-left 相同，如果省略top-right，则与top-left 相同。前面学习了CSS3的transition和transform属性，虽然二者结合可以实现一些简单的动画效果，但是也有一些难以克服的缺点，例如我们想让动画在多个状态中转换就无法实现了，CSS3中最后一个动画相关的属性是animations，有了它就可以解决这样的问题。
经典网页设计：18个示例展示图片在网页中的使用
weixin_34050005的博客
09-30 469
　　我们可以说，最近图像占据了网页设计的中心舞台。因此，我们已经看到了一些真正美丽的网站使用了圆滑图像作为焦点，引人注目。在网页设计中，从简约设计的概念到全屏的背景图片，有几种不同的图像使用方法。所以今天我们将告诉你一些启发性的例子。聚集在这里的网站将证明美丽和高品质的图像可以传递信息，彰显个性并迎合用户的喜好。 您可能感兴趣的相关文章 Web 前端开发人员和设计师必读文章集锦 经典...
网页图片展示
qq_41700466的博客
09-16 938
网页图片展示 需求： ​ 在一个页面中展示多张图片 技术分析： ​ 图片标签：* `&amp;amp;amp;lt;img/&amp;amp;amp;gt; 常用属性： ​ `src：图片的路径 ​ `alt：替代文字 ​ `title：移上去显示的文字
网页制作，前端基础展示图片和文档
晓飛的博客
06-11 632
上面是图片效果，下面是简单的实现代码！最后面有素材图片一张！仅供参考！&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initi
设计图文展示响应式网页模板
01-23
响应式网页设计是一种现代网页开发技术，旨在提供跨设备、跨屏幕尺寸的无缝用户体验。它通过灵活的布局、媒体查询和可适应的图像等手段，确保网页在不同设备上（如桌面电脑、平板电脑和手机）都能保持良好的显示效果...
黑色设计图文BLOG网页模板
01-22
1. **黑色**：在网页设计中，黑色常被视为高端、神秘和专业的象征，用于创造优雅和简洁的视觉体验。在博客模板中，黑色背景可以降低用户对页面杂乱的感知，突出内容本身。 2. **设计**：这里指的可能是模板的设计...
玫红图文展示响应式网页模板
01-23
总的来说，“玫红图文展示响应式网页模板”是一个集美观与实用性于一体的网页设计解决方案，它结合了响应式设计原则和玫红色调的视觉吸引力，旨在提供一种在不同设备上都能顺畅浏览的图文展示平台。
简洁左右图文展示响应式网页模板
01-20
"图文展示"是网页设计中常用的一种手法，通过图片与文字的结合，以更直观、生动的方式传达信息。在响应式模板中，图片和文字的布局会根据屏幕大小自动调整，确保在任何设备上都能保持良好的可读性和视觉效果。 ...
网站图文展示JavaScript代码2
01-12
网站图文展示JavaScript代码，想建站的人员非常方面的嵌套在网站里面。
基于jquery的图文展示代码
09-26
基于jquery的图文展示代码。自己学JQUERY的时候下载的，有需要的可以参考下
多图文页面
Thinking的专栏
08-10 1071
多图文                             form {             margin: 0;         }         textarea {             display: block;         }         .mainboard{            display: block;      
图文排版html,超漂亮的网页图文排版欣赏
weixin_39627481的博客
06-10 2510
网站首页第一屏的排版非常重要，很多时候能决定用户的去与留，特别是目前的扁平化网站，对图文排版要求较高，因为没有花哨的质感特效，重点以展示内容为主。今天为大家分享一系列图文排版不错的国外设计网站，也许会给你带来不同的排版灵感。对于下面这些例子，除了排版不错外，重点可以看看字体风格的选用，同样是值得我们思考学习的。Bigdropinc下面的图文的排版十分常用，用法简单，效果好。因为有了图像，文字色彩...
【汇智学堂】-div+css布局十(商品管理-商品图文列表展示页面)
weixin_39593940的博客
06-30 1116
效果图： 我们现在主要来看轮播图下面的设计： <div> <ul> <li> <a href="#"><img src="images/11.jpg" /></a> <p>回收奖金一</p> </li> ...
html5学习笔记——三、图文展示网页设计
乐乐呀的博客
03-26 1398
常用图像标签 css阴影和渐变 border-radius属性 css transitions css transform 2D转换 元素变形原点 3D转换 css 精灵技术 标签用于定义网页中的图像，语法格式如下： 标签和标签 当需要在网页中添加一个插图时 ，就可以使用标签来实现
js模拟动画之 商品展示效果
web开发自学
10-16 202
&lt;HEAD&gt; &lt;TITLE&gt;方框移动&lt;/TITLE&gt; &lt;metahttp-equiv="Content-Type"content="text/html;charset=GBK"&gt; &lt;stylelanguage="javascript"&gt; &lt;!-- body,td{ font-size:9pt; }
设计并制作图文混排网页，网页效果如下
最新发布
sankang2022的博客
12-26 897
（1）新建以“班级+名字”命名的站点。 （2）新建图文混排网页文件index.html。 （3）网页标题使用2号标题，居中显示。 （4）在网页中加载图片并设置图片大小。 （5）使用段落标记，添加网页文字。 （6）加入水平线并设置其样式。 （7）插入超链接并设置其样式。 （8）为该页面添加css样式，美化网页文件。
超漂亮的网页图文排版
qq_20913021的博客
04-18 3786
博看文思 相信学习HTML5的小伙伴们一定明白网站首页第一屏排版的重要性，很多时候它能在第一时间内决定用户的去留，特别是目前的扁平化网站，对图文排版要求较高，因为没有花哨的质感特效，重点以展示内容为主。 那今天在这篇文章中，给大家分享一系列图文排版不错的国外设计网站，也许会给你带来不同的排版灵感。 这些站点在排版上特色鲜明，对于文字色彩与图片的把握非常值得学习！重点可以
农产品HTML网页制作-图文混排页制作.pptx
11-01
“农产品HTML网页制作-图文混排页制作.pptx” 在网页设计与制作中，HTML（HyperText ...对于复杂的图文混排，还需要掌握CSS（Cascading Style Sheets）来控制元素的布局和样式，以实现美观且功能完善的网页设计。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值