<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3点击显示</title>
<style>
*{ margin:0; padding:0; }
html{ height:100%; }
p{ padding:10px 0; }
body{ min-height:100%; font-family:arial; position:relative; }
body.sideMenu{ margin:0; -webkit-transform:none; transform:none; }
#footer {
position:relative;
bottom:0; left:0;
width:100%;
height:48px;
background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
background-image:-moz-linear-gradient(top, #999, #666 2%, #222);
background-image:-o-linear-gradient(top, #999, #666 2%, #222);
padding:0;
border-top:1px solid #444; transition:0.25s ease-out; -webkit-transition:0.25s ease-out;
}
#sideToggle{ display:none; }
#sideToggle:checked + aside{ left:0; }
#sideToggle:checked ~ #wrap{ padding-left:220px; }
#sideToggle:checked ~ #footer{margin-left:200px; }
body > aside{ position:absolute; top:0; bottom:0; left:-200px; width:200px; background:#f1103a; transition:0.2s ease-out; -webkit-transition:0.2s ease-out; }
body > aside > h2{ color:#FFF; text-align:center; font-weight:normal; padding:10px; }
#wrap{ margin-left:20px; padding:10px; transition:0.25s ease-out; -webkit-transition:0.25s ease-out; }
#wrap > label{ display:inline-block; }
#wrap > label{
background:#f1103a;
border-radius:50px;
color: #FFF;
cursor: pointer;
display: block;
font-family: Courier New;
font-size: 25px;
font-weight: bold;
width: 30px;
height: 30px;
line-height: 35px;
text-align: center;
text-shadow: 0 -4px;
}
#wrap > label:hover{ background:#000; }
</style>
</head>
<body>
<input type='checkbox' id='sideToggle'>
<aside><h2>Side Menu</h2></aside>
<div id='wrap'>
<label id='sideMenuControl' for='sideToggle'>=</label>
<p>HTML5/CSS3点击显示侧边框 </p>
</div>
<div id="footer"></div>
</body>
</html>
分享到：
相关推荐
在这个游泳培训班模板中，HTML标签会被用来组织网页的各个部分，如头部、导航、主体内容、侧边栏和页脚等。同时，HTML5引入了许多新的标签，如、、、等，使得代码更加语义化，便于搜索引擎优化（SEO）和无障碍访问。...
例如，`<header>`定义页面头部，`<nav>`用于导航菜单，`<section>`划分页面区域，`<article>`表示独立的内容块，`<aside>`常用于侧边栏，`<footer>`则是页脚信息。在个人空间的设计中，我们可以使用这些标签来创建...
例如，`<header>`用于定义页面头部，`<nav>`用于创建导航链接，`<main>`表示主要内容区域，`<article>`用于定义独立的内容单元，`<aside>`则常用于侧边栏，而`<footer>`则标记页脚信息。在仿写B站主界面时，这些标签...
例如，`<header>`用于创建页面头部，`<section>`用于组织内容，`<article>`表示独立的内容块，`<aside>`则用于侧边栏信息。此外，`<h1>`至`<h6>`用于定义不同级别的标题，`<p>`用于段落，`<a>`用于链接，`<img>`插入...
- **功能**：定义页面内容之外的相关信息，如侧边栏。 - **版本**：仅在HTML5中新增。 ##### 11. `<audio>` - **功能**：定义声音内容，用于播放音频文件。 - **版本**：仅在HTML5中新增。 ##### 12. `<b>` -...
- `<aside>`：用于定义和主内容相关但又可独立的辅助信息，如侧边栏。 - `<footer>`：用于定义文档或部分的底部。 **5. HTML5新增的格式标签** - `<mark>`：用于突出显示文本中的重要部分。 - `<progress>`：用于...
6. **网页结构**：一个简洁的网页模版通常包含头部（header）、导航（nav）、主体（main）、侧边栏（sidebar）、底部（footer）等部分，这些可以通过HTML的布局元素如`<div>`来实现。良好的结构有助于提高用户体验和...
2. **商品分类**：方便用户按照类别查找商品，可能通过下拉菜单或侧边栏导航实现。 3. **商品详情页**：展示商品的详细信息，包括图片、价格、库存、规格选项等，并提供添加到购物车或立即购买的按钮。 4. **购物车*...
这类效果通常用于网站的头部或侧边栏，以吸引用户注意力并展示多种广告内容。幻灯片广告能够自动化地在一段时间间隔后切换图片或内容，为用户提供动态浏览体验。 【描述】提供的演示地址...
用户点击某个标题或按钮时，相应的内容区域会滑动展开，而其他已展开的区域则会自动收缩，呈现出类似手风琴收放的效果。这种效果不仅美观，还能帮助用户专注于一项任务，避免信息过载。 在描述中提到的“横向及纵向...
4. 布局管理：组织页面元素，如侧边栏、主内容区等。 【Bootstrap】 Bootstrap简化了网页设计和响应式布局的实现。在WeatherApp中： 1. 栅格系统：利用Bootstrap的栅格系统，实现灵活的布局调整，适应不同屏幕尺寸...
这可以通过JavaScript或者CSS固定定位（`position: fixed`）来实现，常用于导航栏或侧边栏，以提升用户导航的便利性。 4. **个人中心亮点**：在“仿多米首页”中，可能设计了一个独特且吸引人的个人中心界面，作为...
4. **`<aside>`**: 用来标记那些与页面主要内容相关但又不是主要内容的一部分的内容，例如侧边栏、注释或广告。 ### 实现响应式网站设计（RWD） 响应式网站设计是一种方法，让网站在不同设备和屏幕尺寸上都能正常...
16. 菜单和导航：通过JavaScript，可以创建动态菜单和导航，如下拉菜单、面包屑导航、侧边栏折叠等。 17. 代码高亮：利用highlight.js等库，可以为代码块添加语法高亮，提高代码可读性。 18. 滚动动画：实现页面...
9. **语义化HTML**：使用合适的标签描述内容，如`<header>`表示页眉，`<nav>`定义导航，`<main>`代表主要内容，`<aside>`用于侧边栏，有助于提高网页可读性和搜索引擎优化。 10. **HTML与JavaScript交互**：通过...
在仿B站风格的改造中，开发者通常会着重模仿B站的UI设计，如顶部导航栏、侧边栏、播放器界面等，并加入B站特色的弹幕系统。 "Cardinfo"可能是指在系统中使用的卡片式信息展示方式，这种设计常见于现代网页，能有效...
前端模板的设计通常会遵循模块化和可复用的原则，这意味着模板中的各个部分，如头部、导航、主要内容区域、侧边栏、页脚等，都是独立的组件，可以方便地进行修改和组合。这种设计方式有助于提高开发效率，减少代码...
- **位置**：指定了 Joomla 网站中各个组件的位置，如侧边栏、页脚等。 - **核心模板**：介绍了 Joomla 默认提供的几个模板。 - **样式**：讲解了如何通过 CSS 和其他手段自定义 Joomla 网站的设计。 - **导航**：...
1. **网页布局设计**：合理的页面布局能引导用户顺畅地浏览网站，如头部导航、主体内容区、侧边栏和底部版权信息等。 2. **响应式设计**：确保网站在不同设备（手机、平板、桌面电脑）上都能自适应显示，提供良好的...