1. 首页
  2. 分类
  3. css3
用css画一个csdn程序猿
System
2024-08-21
所有,css3

以下是使用CSS创建一个简单程序猿图形的代码示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cutey Programmer</title>
<style>
  .programmer {
    position: relative;
    width: 200px;
    height: 300px;
    background: #29b6f6;
    border-radius: 50% 50%;
    margin: 50px auto;
  }
  .programmer::before, .programmer::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .programmer::before {
    width: 60px;
    height: 100px;
    background: #29b6f6;
    border-radius: 50%;
  }
  .programmer::after {
    width: 80px;
    height: 120px;
    background: #29b6f6;
    border-radius: 50%;
    z-index: -1;
  }
  .programmer-body::before, .programmer-body::after {
    content: '';
    position: absolute;
    width: 100px;
    height: 180px;
    background: #29b6f6;
    border-radius: 50%;
  }
  .programmer-body::before {
    top: -50px;
    left: 20px;
    z-index: -1;
  }
  .programmer-body::after {
    bottom: -50px;
    right: 20px;
    z-index: -1;
  }
  .programmer-head {
    position: absolute;
    top: -60px;
    left: 60px;
    width: 60px;
    height: 60px;
    background: #29b6f6;
    border-radius: 50%;
    z-index: 1;
  }
  .programmer-ear {
    position: absolute;
    width: 40px;
    height: 40px;
    background: #29b6f6;
    border-radius: 50%;
    z-index: 1;
  }
  .programmer-ear.left {
    top: -10px;
    left: 30px;
  }
  .programmer-ear.right {
    top: -10px;
    right: 30px;
  }
  .programmer-eye {
    position: absolute;
    width: 16px;
    height: 28px;
    background: white;
    border-radius: 50%;
    z-index: 1;
  }
  .programmer-eye.left {
    top: 40px;
    left: 40px;
  }
  .programmer-eye.right {
    top: 40px;
    right: 40px;
  }
  .programmer-eyebrow {
    position: absolute;
    width: 80px;
    height: 12px;
    background: #29b6f6;
    border-radius: 50%;
    z-index: 1;
  }
  .programmer-eyebrow.left {
    top: 32px;
    left: 32px;
    transform: rotate(-20deg);
  }
  .programmer-eyebrow.right {
    top: 32px;
    right: 32px;
    transform: rotate(20deg);
  }
  .programmer-nose {
    position: absolute;
    width: 24px;
    he
- 阅读更多 -
@media 使用方法整理
System
2024-08-21
所有,css3

在CSS中，@media规则用于创建媒体查询，这可以根据不同的屏幕和设备特性（如屏幕宽度、分辨率、设备方向等）应用不同的样式规则。

以下是一些常见的@media使用方法：

  1. 响应式网页设计：



@media screen and (max-width: 599px) {
  body {
    background: blue;
  }
}
@media screen and (min-width: 600px) {
  body {
    background: red;
  }
}
  1. 为打印设置特定样式：



@media print {
  body {
    color: black;
    background: white;
  }
}
  1. 为移动设备设置样式：



@media screen and (max-width: 480px) {
  body {
    font-size: 12px;
  }
}
  1. 使用媒体功能查询：



@media (max-width: 600px) and (orientation: landscape) {
  body {
    background: green;
  }
}
  1. 使用not关键字排除某些媒体特性：



@media not print {
  body {
    background: yellow;
  }
}
  1. 使用all关键字选择所有媒体类型：



@media all and (min-width: 500px) {
  body {
    background: purple;
  }
}
  1. 使用媒体查询组合多个媒体类型和多个媒体特性：



@media screen, print and (orientation: landscape) {
  body {
    background: orange;
  }
}

这些是@media规则的基本用法，可以根据实际需求进行扩展和应用。

- 阅读更多 -
Javaweb表单验证问题
System
2024-08-21
所有,css3

在Java Web应用中，表单验证是一个常见的需求。以下是一个使用Servlet和JSP进行简单表单验证的例子：

  1. 创建一个Servlet来处理表单提交：



@WebServlet("/RegisterServlet")
public class RegisterServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 接收表单数据
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        String email = request.getParameter("email");
 
        // 验证数据
        if (username == null || username.trim().isEmpty()) {
            request.setAttribute("error", "用户名不能为空");
        } else if (password == null || password.trim().isEmpty()) {
            request.setAttribute("error", "密码不能为空");
        } else if (email == null || email.trim().isEmpty() || !email.matches("^[a-zA-Z0-9_+&*-]+(?:\\.[a-zA-Z0-9_+&*-]+)*@(?:[a-zA-Z0-9-]+\\.)+[a-zA-Z]{2,7}$")) {
            request.setAttribute("error", "邮箱格式不正确");
        } else {
            // 数据验证通过，处理其他逻辑
            // ...
            // 跳转到成功页面
            response.sendRedirect("success.jsp");
            return;
        }
 
        // 数据验证失败，保留表单数据，跳转回注册页面
        request.setAttribute("username", username);
        request.setAttribute("password", password);
        request.setAttribute("email", email);
        request.getRequestDispatcher("register.jsp").forward(request, response);
    }
}
  1. 创建一个JSP文件用于显示表单和显示错误信息：



<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册</title>
</head>
<body>
<% if (request.getAttribute("error") != null) { %>
    <div style="color: red;">
        <%= request.getAttribute("error") %>
    </div>
<% } %>
 
<form action="RegisterServlet" method="post">
    用户名: <input type="text" name="username" value="${username}">
    密码: <input type="password" name="password" value="${password}">
    邮箱: <input type="text" name="email" value="${email}">
    <input type="submit" value="注册">
</form>
</body>
</html>

在这个例子中，当Servlet接收到表单提交时，它会检查用户名、密码和邮箱是否为空以及邮箱格式是否正确。如果任何一项验证失败，它会将错误信息存储在request属性中，并将表单数据以及错误信息回传至JSP页面，让用户能够修正错误。如果所有验证都通过，可以在这里添加进一步的逻辑处理，比如将数据保存到数据库中，并重定向到一个成功页面。

- 阅读更多 -
html作品展示
System
2024-08-21
所有,css3

以下是一个简单的HTML网页代码示例，用于展示艺术作品集：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>艺术作品集</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
        }
        .artwork-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }
        .artwork-item {
            margin: 10px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            padding: 20px;
            flex: 1 1 200px;
        }
        .artwork-item img {
            width: 100%;
            height: auto;
        }
        .artwork-item h3 {
            text-align: center;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <h1>艺术作品集</h1>
    <div class="artwork-container">
        <div class="artwork-item">
            <img src="path_to_image/artwork1.jpg" alt="作品1">
            <h3>作品1标题</h3>
        </div>
        <!-- 其他作品项 -->
        <div class="artwork-item">
            <img src="path_to_image/artwork2.jpg" alt="作品2">
            <h3>作品2标题</h3>
        </div>
        <!-- 更多作品 -->
    </div>
</body>
</html>

这个示例使用了简单的HTML结构和内联样式来展示艺术作品集。你可以将src="path_to_image/artwork1.jpg"和<h3>作品1标题</h3>替换为你自己的图片路径和标题。你可以复制<div class="artwork-item">...</div>块来增加更多的作品。这个示例展示了如何使用flexbox布局来创建一个响应式的作品展示页面。

- 阅读更多 -
公告栏轮播效果html
System
2024-08-21
所有,css3

要实现一个简单的公告栏轮播效果，你可以使用HTML、CSS和JavaScript。以下是一个基本的例子：

HTML:




<div class="notice-board">
  <div class="notice-wrapper">
    <ul>
      <li>公告1</li>
      <li>公告2</li>
      <li>公告3</li>
      <!-- 更多公告 -->
    </ul>
  </div>
</div>

CSS:




.notice-board {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}
 
.notice-wrapper {
  animation: scroll 10s linear infinite;
}
 
.notice-wrapper ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
 
.notice-wrapper li {
  display: inline-block;
  padding: 0 10px;
}
 
/* 根据你的公告数量和宽度调整动画持续时间 */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

这个例子中，.notice-board 容器设置了 overflow: hidden 来隐藏超出容器的部分，.notice-wrapper 使用 animation 属性来创建持续滚动的效果。你可以根据实际的公告数量和宽度调整动画的时长，以确保公告栏平滑地循环滚动。

- 阅读更多 -
【HTML+CSS】弹性盒子
System
2024-08-21
所有,css3

弹性盒子（Flexible Box，Flexbox）是CSS3的一种布局模型，可以简便、灵活地实现各种页面布局。

以下是一个使用弹性盒子的简单示例：

HTML:




<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS:




.flex-container {
  display: flex; /* 使用弹性盒子布局 */
  flex-direction: row; /* 设置主轴方向为水平方向 */
  justify-content: space-around; /* 项目在主轴方向上平均分布 */
  align-items: center; /* 项目在交叉轴方向上居中对齐 */
  height: 100px; /* 容器高度 */
  background-color: #f0f0f0; /* 背景颜色 */
}
 
.flex-item {
  width: 100px; /* 项目宽度 */
  text-align: center; /* 文字居中 */
  line-height: 100px; /* 行高与容器高度相同，实现垂直居中 */
}

这个示例创建了一个水平方向上平均分布的弹性容器，其中包含三个等宽的子项。每个子项在水平方向上是等宽的，并且在垂直方向上通过行高与容器高度对齐，实现居中显示。

- 阅读更多 -
CSS层级问题以及CSS透明效果
System
2024-08-21
所有,css3



/* 解决层级问题 */
.parent {
  position: relative; /* 相对定位 */
}
.child {
  position: absolute; /* 绝对定位 */
  top: 0; /* 子元素定位到父元素的顶部 */
  left: 0; /* 子元素定位到父元素的左侧 */
}
 
/* 添加透明度效果 */
.transparent {
  opacity: 0.5; /* 设置元素的透明度为50% */
  filter: alpha(opacity=50); /* 针对IE8及以下版本的兼容写法 */
}

这段代码展示了如何解决层级问题和如何在CSS中添加透明效果。使用position: absolute;可以确保.child元素相对于.parent定位，而opacity属性和filter属性则用于添加透明效果，同时考虑了IE浏览器的兼容性。

- 阅读更多 -
html中二级菜单以及主页的实现，HTML+css
System
2024-08-21
所有,css3

以下是一个简单的HTML和CSS示例，实现了二级菜单和主页的基本结构：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>二级菜单示例</title>
<style>
  body {
    font-family: Arial, sans-serif;
  }
  .header {
    background-color: #333;
    color: white;
    padding: 10px 0;
    text-align: center;
  }
  .nav {
    list-style: none;
    background-color: #444;
    overflow: hidden;
  }
  .nav li {
    float: left;
    border-right: 1px solid #bbb;
  }
  .nav li:last-child {
    border-right: none;
  }
  .nav li a {
    display: block;
    color: white;
    text-decoration: none;
    padding: 10px 20px;
  }
  .nav li a:hover {
    background-color: #555;
  }
  .nav-dropdown {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  .nav-dropdown a {
    color: black;
    padding: 12px 15px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  .nav-dropdown a:hover {
    background-color: #f1f1f1;
  }
  .nav li:hover .nav-dropdown {
    display: block;
  }
</style>
</head>
<body>
 
<div class="header">
  <h1>主页</h1>
</div>
 
<ul class="nav">
  <li><a href="#home">主页</a></li>
  <li><a href="#news">新闻</a>
    <ul class="nav-dropdown">
      <li><a href="#">内部新闻</a></li>
      <li><a href="#">公司动态</a></li>
    </ul>
  </li>
  <li><a href="#contact">联系我们</a></li>
  <li><a href="#about">关于</a></li>
</ul>
 
</body>
</html>

这段代码展示了如何使用HTML和CSS创建一个简单的二级菜单，当鼠标悬停在具有下拉子菜单的导航项上时，会显示子菜单。这个示例提供了一个基本框架，可以根据实际需求进行扩展和定制。

- 阅读更多 -
这个css布局样式真巧妙啊，react导航栏组件：Headmenu实现
System
2024-08-21
所有,css3

由于原代码已经非常简洁，以下是一个React组件的示例，使用了类似的CSS样式来实现一个头部导航栏（Headmenu）：




import React from 'react';
import { Link } from 'react-router-dom';
import './Headmenu.css';
 
const Headmenu = () => {
  return (
    <div className="headmenu">
      <ul>
        <li>
          <Link to="/">首页</Link>
        </li>
        <li>
          <Link to="/about">关于我们</Link>
        </li>
        <li>
          <Link to="/contact">联系方式</Link>
        </li>
      </ul>
      <style jsx>{`
        .headmenu {
          background-color: #282c34;
          overflow: hidden;
          font-size: 17px;
          font-weight: 300;
          padding: 10px 0;
          text-align: center;
        }
        .headmenu ul {
          display: inline-block;
        }
        .headmenu li {
          display: inline;
          margin-right: 20px;
        }
        .headmenu a {
          color: #fff;
          text-decoration: none;
        }
        .headmenu a:hover {
          text-decoration: underline;
        }
      `}</style>
    </div>
  );
};
 
export default Headmenu;

这个React组件使用了内联样式（即style jsx）来避免CSS文件的引入，并且使用了react-router-dom中的Link组件来创建导航链接。这个示例展示了如何使用React和CSS来创建一个简洁而又现代的导航栏。

- 阅读更多 -
css 浮动
System
2024-08-21
所有,css3

CSS 浮动（Float）属性用于创建浮动框，将其移动到一边，使其周围的内容环绕。浮动框可以是左浮动（float: left;）或右浮动（float: right;）。

解决浮动带来的父元素高度塌陷问题的常用方法有：

  1. 使用 overflow: hidden; 或 overflow: auto; 在父元素上。
  2. 使用 clearfix 技巧，通常通过在父元素的结尾添加一个 clearfix 类的元素来解决。

以下是一个简单的 clearfix 实现示例：




/* Clearfix */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}



<!-- 父元素 -->
<div class="parent clearfix">
  <!-- 子元素 -->
  <div class="child" style="float: left;">左浮动内容</div>
  <!-- 清除浮动 -->
</div>

使用这个 clearfix 类可以防止父元素高度塌陷，确保父元素包含所有浮动的子元素。

- 阅读更多 -
Copyright © 2024 Tech Blog
All Right Reserved | 京ICP备19053165号