XUECSS.CNhttps://xuecss.cn/try/在线编辑器鼠标经过图片放大https://xuecss.cn/try/?id=56<!DOCTYPE html> <html> <head> <style> div { width:100px; /*宽度*/ height:200px;/*高度*/ background:red;/*背景为红色*/ transition: 0.3s;/*图片放大所用时间*/ margin: 100px;/*边框宽度*/ } div:hover { transform: scale(1.1); /*大于1是放大，小于1是缩小，1是不变*/ } </style> </head> <body> <div><img src="https://www.meishuzi.com/logo/zb_users/upload/2023/03/20230323103719167953903946096.jpg" /></div> <div>图片地址</div> <p>把鼠标指针移动到红色的图片上就可以看到过渡效果。</p> </body> </html>Sat, 25 Mar 2023 00:05:22 +0800使用css控制PC和移动不同页面宽度显示不同的广告https://xuecss.cn/try/?id=55<style type="text/css"> .pc{display:block;} .mip{ display:none} @media(max-width:768px) { .pc{display:none !important;} .mip{display:block !important;}} </style> <div class="pc">此处放入显示在电脑上的广告代码</div> <div class="mip">此处放入显示在手机上的广告代码</div>Wed, 13 Oct 2021 21:12:25 +0800网页尾部（footer）写法https://xuecss.cn/try/?id=54<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>网页尾部（footer）写法</title> <style type="text/css"> *{ padding: 0; margin: 0; }* .footer{ margin-top: 20px; background:#222c3a; width: 100%; height: 165px; text-align: center; color: white; position: absolute; } .footer .footer-top{ margin-top: 50px; } .footer a{ color: #f0f1f1; text-decoration: none; padding: 0 10px; vertical-align:middle; } .footer a:hover{ color: red; text-decoration: underline; } .footer p{ height: 15px; color: #888888; margin-top: 30px; } </style> </head> <body> <div class="footer"> <div class="footer-top"> <a href="#">百度网</a> | <a href="#">新浪网</a> | <a href="#">腾迅房产</a> | <a href="#">找货网</a> | <a href="#">北极绒</a> | <a href="#">阿里巴巴</a> | </div> <p> ©Copyright 2021 xuecss科技公司版权所有 | 苏ICP备1243123121号-2 </p> </div> </body> </html>Fri, 08 Oct 2021 11:03:15 +0800CSS3导航菜单旋转切换代码https://xuecss.cn/try/?id=53<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS3导航菜单旋转切换代码</title> <style> * { margin: 0; padding: 0; } .w { width: 1200px; margin: 140px auto; } .nav_menu { display: flex; justify-content: space-around; align-items: center; height: 50px; /* background-color: #4caf50; */ /* border: 1px solid #ccc; */ padding: 10px; color: #fff; } .menu_item { position: relative; flex: 1; height: 100%; line-height: 50px; text-align: center; transform-style: preserve-3d; transition: all 0.5s; /* margin: 0 5px; */ } .menu_item:hover { cursor: pointer; transform: rotateX(90deg); } .home, .web_home { position: absolute; top: 0; left: 0; width: 100%; height: 100%; perspective: 300px; } .home { background-color: #4caf50; z-index: 11; transform: translateZ(25px); } .web_home { background-color: #009688; transform: translateY(25px) rotateX(-90deg); } </style> </head> <body> <div class="nav_menu w"> <div class="menu_item"> <div class="home">首页</div> <div class="web_home">网站首页</div> </div> <div class="menu_item"> <div class="home">首页1</div> <div class="web_home">网站首页1</div> </div> <div class="menu_item"> <div class="home">首页2</div> <div class="web_home">网站首页2</div> </div> <div class="menu_item"> <div class="home">首页3</div> <div class="web_home">网站首页3</div> </div> <div class="menu_item"> <div class="home">首页4</div> <div class="web_home">网站首页4</div> </div> <div class="menu_item"> <div class="home">首页5</div> <div class="web_home">网站首页5</div> </div> </div> </body> </html>Thu, 07 Oct 2021 21:17:43 +0800首页测试字体使用https://xuecss.cn/try/?id=52<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>学习样式(xuecss.cn)</title> <style> h3 { /*把生成的css代码粘贴放到下面的空白处，然后点击运行*/ } </style> </head> <body> <h3>我是h3开头的标签，很短。我是被h3样式控制</h3> <h3>我也是h3开头的标签，很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长...这个故事的名字叫 《很长》。我也是被h3的样式控制的</h3> <p>我开头是p开头的标签，h3的样式无法控制我。</p> </body> </html>Thu, 07 Oct 2021 01:06:54 +0800css听觉https://xuecss.cn/try/?id=47<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>学CSS样式网(xuecss.cn)</title> <style> @media screen { p.test {font-family:verdana,sans-serif;font-size:14px;} } @media print { p.test {font-family:times,serif;font-size:10px;} } @media screen,print { p.test {font-weight:bold;} } </style> </head> <body> <p class="test">菜鸟教程 -- 学的不仅是技术，更是梦想！！！</p> </body> </html>Wed, 06 Oct 2021 10:55:11 +0800导航按钮https://xuecss.cn/try/?id=46<head> <style> nav{ background-color: #17a1ff; border-color: #17a1ff; top: 0; border-width: 0 0 1px; position: fixed; right: 0; left: 0; z-index: 1030; } nav ul { float:left; margin: 0px; padding: 0 0 0 0; width: 1200px; list-style: none; } nav ul li { display: inline; } nav ul li a { float: left; padding: 11px 20px; font-size: 14px; text-align: center; text-decoration: none; color: #fff; font-family: Tahoma; outline: none; } nav li a:hover { color: #2a5f00; } </style> </head> <body> <!--导航开始--> <nav class="nav"> <ul class="ul"> <li><a href="#">首页</a></li> <li><a href="try">在线测试</a></li> <li><a href="blog">学习笔记</a></li> <li><a href="anniu">css按钮样式生成</a></li> <li><a href="sfz">生日</a></li> <li><a href="suijidianming">随机点名</a></li> <li><a href="dianming">统计点名</a></li> <li><a href="buju">布局学习</a></li> </ul> </nav> <!--导航结束--> </body>Wed, 29 Sep 2021 23:37:16 +0800链接使用了 href 属性https://xuecss.cn/try/?id=40<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>学CSS样式网(xuecss.cn)</title> </head> <body> <a href="https://www.xuecss.com">这是一个链接使用了 href 属性</a> </body> </html>Thu, 23 Sep 2021 23:04:53 +0800在线编辑器https://xuecss.cn/try/?id=33 Sun, 16 Feb 2020 14:28:01 +0800认识CSS的作用https://xuecss.cn/try/?id=32<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>学CSS网(xuecss.cn)</title> <style> body { background-color:#f08a5d; } /*解释：控制<body>...</body>中的背景颜色为橙色*/ h1 { color:#b83b5e; text-align:center; } /*解释：控制<h1>...</h1>字体红色和居中*/ p { font-family:"Times New Roman"; font-size:20px; } /*解释：控制<p>..</p>字体和字体大小为20px */ </style> </head> <body> <h1>大家好，我是CSS爱好者，我的样式由h1{...}控制</h1> <p>这是一个段落。我的样式由p{...}里面的数值控制</p> <h1>我的样式依然由h1{...}控制</h1> </body> </html> Sat, 15 Feb 2020 22:18:49 +0800