标签 css 下的文章

2024-08-11

在Go语言的Gin框架中，加载HTML、CSS和JavaScript等静态资源通常涉及到设置静态文件目录并通过路由规则来提供这些文件的访问。以下是一个简单的示例：




package main
 
import (
    "github.com/gin-gonic/gin"
)
 
func main() {
    router := gin.Default()
 
    // 设置静态文件目录
    router.Static("/static", "./static")
 
    // 设置HTML模板文件目录
    router.LoadHTMLGlob("./templates/*")
 
    // 首页路由
    router.GET("/", func(c *gin.Context) {
        // 渲染HTML模板，并返回给客户端
        c.HTML(http.StatusOK, "index.html", gin.H{
            "title": "首页",
        })
    })
 
    // 启动服务器
    router.Run(":8080")
}

在这个示例中，router.Static 方法用于设置静态文件目录，这里设置的路径是 /static，文件存放在 ./static 目录下。router.LoadHTMLGlob 方法用于设置HTML模板文件的目录，这里使用 * 来匹配所有的HTML模板文件，它们被放置在 ./templates 目录下。

在路由处理函数中，使用 c.HTML 方法来渲染指定的HTML模板，并将渲染后的内容返回给客户端。

确保你的 ./static 目录和 ./templates 目录与你的Go源代码文件处于同一级别目录中，并且在 ./templates 目录下有一个 index.html 文件作为示例。

这样，当你访问服务的根路径 / 时，服务器会提供 index.html 页面，并且加载 /static 目录下的静态资源。

- 阅读更多 -

【HTML+CSS+JS】登录注册页面大合集

System

2024-08-11

所有,javascript

以下是一个简单的登录和注册页面的示例，使用了HTML、CSS和JavaScript。




<!-- 登录页面 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<style>
  body { font-family: Arial, sans-serif; }
  .form-container { max-width: 300px; margin: 50px auto; }
  form { display: flex; flex-direction: column; }
  form label { margin-bottom: 10px; }
  form input[type="text"], form input[type="password"] { margin-bottom: 10px; }
  form button { margin-top: 10px; }
</style>
</head>
<body>
<div class="form-container">
  <h2>Login</h2>
  <form id="loginForm">
    <label for="loginUsername">Username:</label>
    <input type="text" id="loginUsername" required>
    <label for="loginPassword">Password:</label>
    <input type="password" id="loginPassword" required>
    <button type="submit">Login</button>
  </form>
</div>
 
<script>
  const loginForm = document.getElementById('loginForm');
  loginForm.addEventListener('submit', function(event) {
    event.preventDefault();
    const username = loginUsername.value;
    const password = loginPassword.value;
    // 在这里添加登录验证逻辑
    console.log('Login with username: ' + username);
  });
</script>
</body>
</html>
 
<!-- 注册页面 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up Page</title>
<style>
  body { font-family: Arial, sans-serif; }
  .form-container { max-width: 300px; margin: 50px auto; }
  form { display: flex; flex-direction: column; }
  form label { margin-bottom: 10px; }
  form input[type="text"], form input[type="email"], form input[type="password"] { margin-bottom: 10px; }
  form button { margin-top: 10px; }
</style>
</head>
<body>
<div class="form-container">
  <h2>Sign Up</h2>
  <form id="signupForm">
    <label for="signupUsername">Username:</label>
    <input type="text" id="signupUsername" required>
    <label for="signupEmail">Email:</label>
    <input type="email" id="signupEmail" required>
    <label for="signupPassword">Password:</label>
    <input type="password" id="signupPassword" required>
    <button type="submit">Sign Up</button>
  </form>
</div>
 
<script>
  const signupForm = document.getElementById('signupForm');
  signupForm.addEven

- 阅读更多 -

【前端】夯实基础 css/html/js 50个练手项目（持续更新）

System

2024-08-11

所有,javascript

这个问题看起来像是在寻求一些实践项目来提升他们的前端技能。下面是一些基于HTML, CSS, 和JavaScript的练手项目。

导航条效果
响应式布局
滑动菜单
图片轮播
滑动解锁
选项卡
滑动结束删除项
进度条
滑动显示更多
下拉刷新

以下是每个项目的简要代码示例：

导航条效果




<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
  </ul>
</nav>

响应式布局




@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

滑动菜单




<div class="menu">
  <button class="menu-btn">☰ Menu</button>
  <ul class="menu-items">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

图片轮播




<div class="slideshow-container">
  <div class="mySlides fade">
    <img src="img1.jpg" style="width:100%">
  </div>
  <!-- Next and previous buttons -->
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>

滑动解锁




document.addEventListener('mousemove', function(e) {
  let x = e.clientX;
  let y = e.clientY;
  let lock = document.querySelector('.lock');
  lock.style.left = `${x}px`;
  lock.style.top = `${y}px`;
});

选项卡




<div class="tab">
  <button class="tablinks" onclick="openTab(event, 'tab1')">Tab 1</button>
  <button class="tablinks" onclick="openTab(event, 'tab2')">Tab 2</button>
</div>
 
<div id="tab1" class="tabcontent">
  <h3>Tab 1</h3>
  <p>This is tab 1 content.</p>
</div>
 
<div id="tab2" class="tabcontent">
  <h3>Tab 2</h3>
  <p>This is tab 2 content.</p>
</div>

滑动结束删除项




<ul>
  <li>Item 1 <button onclick="deleteItem(this)">Delete</button></li>
  <li>Item 2 <button onclick="deleteItem(this)">Delete</button></li>
  <li>Item 3 <button onclick="deleteItem(this)">Delete</button></li>
</ul>

进度条




<div class="progress-bar-container">
  <div class="progress-bar" style="width: 25%"></div>
</div>

滑动显示更多




<div class="more-container">
  <div class="more-button">Show more ⬇</div>
  <div class="more-text">
    Lorem ipsum dolor sit amet, co

- 阅读更多 -

预编译sass的出现，css也可以变得优雅

System

2024-08-11

所有,css

预编译Sass是指将Sass代码提前编译成CSS，而不是在用户访问网页时实时编译。这样做的好处是可以提高网页的加载速度，因为CSS文件是经过压缩和优化的，不需要在客户端进行编译。

以下是一个简单的Sass预编译示例：

安装Ruby和Sass gem：




gem install sass

创建一个Sass文件，例如 styles.scss：




body {
  font-size: 16px;
  color: #333;
  a {
    text-decoration: none;
    &:hover { color: red; }
  }
}

使用Sass命令行工具来编译Sass文件：




sass styles.scss styles.css

在HTML中引入编译后的CSS文件：




<link rel="stylesheet" href="styles.css">

这样，styles.scss 就被预编译成了 styles.css，在网页中直接引用编译好的CSS文件，可以让网页加载速度更快，同时保持了Sass的优势。

System

2024-08-11

所有,爬虫

在Python中，你可以使用requests库来发送HTTP请求，获取网页内容，然后使用BeautifulSoup和lxml库来解析HTML并选择元素。以下是一个简单的例子，展示如何使用这些库来获取动态网页的内容。

首先，你需要安装必要的库（如果尚未安装的话）：




pip install requests
pip install beautifulsoup4
pip install lxml

然后，你可以使用以下代码来爬取网页：




import requests
from bs4 import BeautifulSoup
 
# 设置URL
url = 'https://www.example.com/'
 
# 发送GET请求
response = requests.get(url)
 
# 检查请求是否成功
if response.status_code == 200:
    # 使用BeautifulSoup解析HTML内容
    soup = BeautifulSoup(response.text, 'lxml')
    
    # 使用CSS选择器选择元素
    # 例如，选择所有的段落元素<p>
    paragraphs = soup.select('p')
    
    # 打印选择到的段落
    for p in paragraphs:
        print(p.text)
else:
    print(f'Failed to retrieve the webpage: Status Code {response.status_code}')

这段代码首先使用requests.get方法向指定的URL发送一个GET请求，然后检查响应状态码以确认请求成功。如果成功，它会使用BeautifulSoup的select方法来选择HTML中所有的<p>标签元素，并打印它们的文本内容。

请注意，动态网页可能需要额外的处理，例如处理JavaScript生成的内容，或者使用如Selenium等工具来直接与浏览器交互以获取最终的页面内容。此外，在实际爬取中，你可能还需要处理Cookies、Session管理、反爬虫策略等问题，确保你的爬虫遵守网站的使用条款。

- 阅读更多 -

CSS Web服务器、2D、动画和3D转换

System

2024-08-11

所有,css

在CSS中，我们可以使用transform属性来进行2D和3D转换。以下是一些示例：

2D转换：




.box {
  transform: translate(50px, 100px); /* 水平移动元素50px，垂直移动100px */
}

3D转换：




.box {
  transform: translate3d(50px, 100px, 150px); /* 水平移动50px，垂直移动100px，向外移动150px */
}

2D旋转：




.box {
  transform: rotate(45deg); /* 顺时针旋转45度 */
}

3D旋转：




.box {
  transform: rotate3d(1, 1, 1, 45deg); /* 在一个3D空间内旋转，围绕(1,1,1)轴旋转45度 */
}

2D缩放：




.box {
  transform: scale(1.5, 2); /* 水平方向放大1.5倍，垂直方向放大2倍 */
}

3D缩放：




.box {
  transform: scale3d(1.5, 2, 2.5); /* 水平方向放大1.5倍，垂直方向放大2倍，放大2.5倍（长度单位） */
}

2D倾斜：




.box {
  transform: skew(30deg, 30deg); /* 水平方向倾斜30度，垂直方向倾斜30度 */
}

3D倾斜：




.box {
  transform: skew3d(30deg, 30deg, 30deg); /* 水平方向倾斜30度，垂直方向倾斜30度，绕z轴倾斜30度 */
}

以上代码展示了如何使用CSS的transform属性进行2D和3D转换。这些转换可以应用于创建动画、UI交互等场景。

- 阅读更多 -

CSS盒子在页面居中的5种常用方法|auto,flex,position的应用

System

2024-08-11

所有,css3

在CSS中，实现一个盒子在页面中居中有多种方法，以下是其中的五种常用方法及其代码示例：

使用margin: auto配合flex布局：




.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.child {
  margin: auto;
}

使用position属性配合transform：




.parent {
  position: relative;
}
 
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

使用flex布局的justify-content和align-items属性：




.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

使用flex布局的margin: auto：




.parent {
  display: flex;
}
 
.child {
  margin: auto;
}

使用grid布局：




.parent {
  display: grid;
  place-items: center;
}

这些方法可以实现盒子在页面中的水平和垂直居中，具体使用哪种方法取决于页面布局和个人喜好。

- 阅读更多 -

CSS white-space 属性文本不换行

System

2024-08-11

所有,css3

white-space 属性用于设置如何处理元素内的空白。当你想要文本保持在一行并且不换行，可以使用 white-space 属性的 nowrap 值。

CSS 代码示例：




.nobreak {
  white-space: nowrap;
}

HTML 代码示例：




<div class="nobreak">这段文本将不会换行，即使它非常长，超过了容器的宽度。</div>

- 阅读更多 -

CSS中的几种尺寸单位

System

2024-08-11

所有,css3

CSS中的尺寸单位主要有以下几种：

px：像素（Pixel），即屏幕上的一个点。
%：百分比，相对于父元素的尺寸。
em：相对于当前元素的字体大小，如果用于设置边距或者填充，则相对于父元素的字体大小。
rem：相对于根元素（即<html>标签）的字体大小，有利于实现响应式设计。
vh：视口高度，1vh等于视口高度的1%。
vw：视口宽度，1vw等于视口宽度的1%。

示例代码：




div {
  width: 100px;   /* 像素单位 */
  height: 50%;    /* 百分比单位 */
  padding: 1em;   /* 相对于父元素字体大小的单位 */
  margin: 2rem;   /* 相对于根元素字体大小的单位 */
  font-size: 1vw; /* 视口宽度的1%作为字体大小 */
  border-radius: 5vh; /* 视口高度的5%作为圆角 */
}

- 阅读更多 -

CSS3 多列布局

System

2024-08-11

所有,css3

CSS3 的多列布局可以使用 column-* 属性来实现。以下是一些常用的属性：

column-count: 定义列的数量。
column-gap: 定义列与列之间的间隙。
column-rule: 定义列之间的分隔线（类似于边框的样式）。

示例代码：




.multi-column {
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3;    /* Firefox */
  column-count: 3;
  
  -webkit-column-gap: 20px; /* Chrome, Safari, Opera */
  -moz-column-gap: 20px;    /* Firefox */
  column-gap: 20px;
  
  -webkit-column-rule: 1px solid #ccc; /* Chrome, Safari, Opera */
  -moz-column-rule: 1px solid #ccc;    /* Firefox */
  column-rule: 1px solid #ccc;
}

HTML 使用该样式的示例：




<div class="multi-column">
  <p>这里是内容...</p>
  <!-- 更多内容 -->
</div>

这段代码会将 .multi-column 类中的内容分成3列，列与列之间的间隙为20px，并在列之间添加一条颜色为灰色（#ccc）、宽度为1px的线。

- 阅读更多 -