Cómo embellecer el borde del módulo Baidu Space

Echa un vistazo. modbox{} es en realidad un código general en la plantilla:

Entre ellos: border-left: 1px solid # 813533; right border: 1px solid #813533

De hecho, lo es los lados izquierdo y derecho de la plantilla Código de configuración de línea de borde. border-left se usa para establecer el borde izquierdo y border-right se usa para establecer el borde derecho.

Entre ellos, 1px se utiliza para establecer el grosor de la línea del borde. Si no desea una línea de borde, configúrela en 0.

Entre ellos, sólido establece el estilo de la línea del borde y su función es especificar el borde como un borde sólido. Se han introducido más estilos:

Línea de puntos: línea de puntos

Línea de puntos: línea de puntos

Doble: borde de doble línea

Ranura: Ranura tridimensional

Crista: Borde de diamante

Ilustración: Borde cóncavo 3D

Inicio: Borde convexo 3D

Si No quiero un estilo de color sólido, simplemente cámbielo al código del estilo que desee, pero de lo que quiero hablar aquí es del estilo del tercero al último, es decir, el estilo de la doble línea. borde al borde convexo 3D, que se basa en la línea del borde El grosor se utiliza para mostrar el efecto. Si el grosor de la línea del borde es inferior a 3 píxeles, el efecto generalmente no será visible.

#813533 es la configuración de color del borde. Puedes cambiarlo a tu código de color favorito.

Los tres parámetros del borde, 1px, sólido y #813533, se han explicado aquí. Los atributos del borde que se mencionan más adelante ya no explicarán estos parámetros.

Entonces echemos un vistazo:

. modbl{}

. modbc{}

. modbr{}

Estos tres son los códigos para configurar la esquina inferior izquierda, la esquina inferior central y la esquina inferior derecha de la plantilla:

Borde izquierdo. modbl {}: establece las propiedades del borde izquierdo en la esquina inferior izquierda, y border-bottom establece las propiedades del borde inferior en la esquina inferior izquierda.

Borde inferior en. modbc { } se utiliza para establecer las propiedades del borde inferior.

La frontera está ahí. modbr{} establece las propiedades del borde derecho en la esquina inferior derecha y border-bottom establece las propiedades del borde inferior en la esquina inferior derecha.

Este es un curso sencillo sobre embellecimiento de fronteras. Creo que los amigos que vienen a menudo a mi espacio a estudiar deberían poder entenderlo. Soy demasiado vago para explicar. Si cada artículo lo explicara con tanto detalle, sería realmente innecesario y muy agotador. . Por eso, sólo puedo pedir perdón a aquellos amigos que vinieron a mi espacio por primera vez. Si no lo entiende, le sugiero que lea mis artículos anteriores y aprenda desde el principio, lo que puede resultarle útil. . .

También lo explicaré brevemente en los siguientes tutoriales, pero creo que los amigos que estén en contacto frecuente con él deberían poder entenderlo. Si no lo comprende, puede resolverlo usted mismo, lo que le ayudará a comprender el código y diseñar un espacio Baidu con su propia personalidad en el futuro. Después de todo, no puedo escribir tutoriales siempre en el futuro. .

Luego hablemos sobre cómo embellecer la barra de título de la plantilla: (si no sabes dibujar o no estás familiarizado con el código, no lo intentes, de lo contrario estarás responsable de las consecuencias)

Muchos de mis amigos han hecho esto antes. Me preguntaron sobre la situación en Tianya en la barra de título. ¿Cómo lo hace la librería Maple Leaf? En ese momento pensé que era un poco difícil y que implicaba pintar, así que no lo escribí. Ahora decidí escribirlo. Espero que si no tienes la confianza para hacerlo bien, no lo intentes casualmente, porque el diseño de esta barra de título es completamente diferente a lo que ven los demás.

Primero déjame explicarte el código:

La clave para configurar la barra de título son estas tres:

. modtl{}

. modtc{}

. modtr{}

Estos tres tienen códigos para configurar imágenes de fondo. Si publico estas tres imágenes de fondo, casi todos deberían entender el secreto de la barra de título.

Las siguientes tres imágenes son respectivamente:

La que diseñé usando Photoshop, las imágenes de la izquierda y la derecha son todos los colores que cambié. Inicialmente son de color azul claro. El tamaño del diseño de la imagen es muy particular, la altura es de 24 píxeles y el ancho no debe exceder el ancho de mi imagen. Y el patrón en esta imagen, es decir, la distancia entre los lados izquierdo y derecho de la palabra "天" y la palabra "Shu", debe ser la misma que la mía. Un poco más o un poco menos puede arruinarte.

Los amigos que conocen Photoshop pueden usar la imagen de arriba para comparar las dimensiones y crear una imagen de su propio estilo.

Después de crear una imagen, recuerda cambiar el código de color del color de fondo en . modtc{} debe ser coherente con el código de color de la imagen que realizó; de lo contrario, será inconsistente.

Entonces aquí viene el punto clave:

Después de terminar de dibujar y escribir el código, el efecto de vista previa es muy pobre y la barra de título está desordenada. Eso es realmente lo que pasó.

Como dije anteriormente, el efecto que veo es completamente diferente al que ven los demás.

Entonces, si quieres saber qué han visto otros, primero debes guardar los cambios, luego cerrar sesión y luego ver tu propio espacio como visitante para ver lo que otros han visto, por lo que debes intentar más. y sé valiente. Pruébalo y familiarízate con la tecnología.

Bien, este tutorial termina aquí

Reimprimir