郑州手机网站推广外包,深圳企业宣传片,社交媒体营销策略有哪些,西山区建设局网站子绝父相
相对定位是相对于自己原本的位置定位。 绝对定位#xff0c;如果父元素设置了相对定位#xff0c;则相对于父元素进行绝对定位#xff0c;否则相对于最近的设置了相对定位的元素进行绝对定位#xff0c;或者相对于根元素进行绝对定位。 定位有四个方向#xff0…子绝父相
相对定位是相对于自己原本的位置定位。 绝对定位如果父元素设置了相对定位则相对于父元素进行绝对定位否则相对于最近的设置了相对定位的元素进行绝对定位或者相对于根元素进行绝对定位。 定位有四个方向分别是top上bottom下left左right右。如果bottom是0left是0则在左下角如果right是0top是0则在右上角。
script setup
import axios from axios;
import {ref} from vue;const message ref(frontend variable)
axios.get(http://127.0.0.1:8001/).then(function (response) {// 处理成功情况console.log(response);message.value response.data.message}).catch(function (error) {// 处理错误情况console.log(error);}).finally(function () {// 总是会执行});
/scripttemplatediv classrelativedivclassstatic bg-primary-100 p-4 border-round text-gray-800stylemin-width: 300px; min-height: 150px;p classfont-bold text-gray-900Static/pdivclassabsolute bottom-0 left-0 bg-primary border-round p-4 font-bold stylemin-width: 120px; min-height: 70pxAbsolute/div/div/div
/template
练习将盒子移动到右上角
script setup
import axios from axios;
import {ref} from vue;const message ref(frontend variable)
axios.get(http://127.0.0.1:8001/).then(function (response) {// 处理成功情况console.log(response);message.value response.data.message}).catch(function (error) {// 处理错误情况console.log(error);}).finally(function () {// 总是会执行});
/scripttemplatediv classrelativedivclassstatic bg-primary-100 p-4 border-round text-gray-800stylemin-width: 300px; min-height: 150px;p classfont-bold text-gray-900Static/pdivclassabsolute top-0 right-0 bg-primary border-round p-4 font-bold stylemin-width: 120px; min-height: 70pxAbsolute/div/div/div
/template 练习让盒子上面的中间
script setup
import axios from axios;
import {ref} from vue;const message ref(frontend variable)
axios.get(http://127.0.0.1:8001/).then(function (response) {// 处理成功情况console.log(response);message.value response.data.message}).catch(function (error) {// 处理错误情况console.log(error);}).finally(function () {// 总是会执行});
/scripttemplatediv classrelativedivclassstatic bg-primary-100 p-4 border-round text-gray-800stylemin-width: 300px; min-height: 150px;p classfont-bold text-gray-900Static/pdivclassabsolute top-0 right-50 bg-primary border-round p-4 font-bold stylemin-width: 120px; min-height: 70pxAbsolute/div/div/div
/template
固定定位
templatediv styleheight: 250pxdiv classrelative bg-primary border-round border-1 border-primary-500 styleheight: 200pxdiv classabsolute top-0 left-0 px-4 py-3 w-full font-boldFixed/divdiv classabsolute overflow-auto surface-overlay mt-6 p-4 line-height-3 text-red-300 styleheight: 150pxLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl rhoncus mattis.Maecenas pharetra convallis posuere morbi leo urna molestie. At in tellus integer feugiat scelerisque.Adipiscing elit duis tristique sollicitudin nibh sit amet commodo. Luctus accumsan tortor posuere ac ut.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl rhoncus mattis.Maecenas pharetra convallis posuere morbi leo urna molestie. At in tellus integer feugiat scelerisque.Adipiscing elit duis tristique sollicitudin nibh sit amet commodo. Luctus accumsan tortor posuere ac ut.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl rhoncus mattis.Maecenas pharetra convallis posuere morbi leo urna molestie. At in tellus integer feugiat scelerisque.Adipiscing elit duis tristique sollicitudin nibh sit amet commodo. Luctus accumsan tortor posuere ac ut.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl rhoncus mattis.Maecenas pharetra convallis posuere morbi leo urna molestie. At in tellus integer feugiat scelerisque.Adipiscing elit duis tristique sollicitudin nibh sit amet commodo. Luctus accumsan tortor posuere ac ut.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl rhoncus mattis.Maecenas pharetra convallis posuere morbi leo urna molestie. At in tellus integer feugiat scelerisque.Adipiscing elit duis tristique sollicitudin nibh sit amet commodo. Luctus accumsan tortor posuere ac ut.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl rhoncus mattis.Maecenas pharetra convallis posuere morbi leo urna molestie. At in tellus integer feugiat scelerisque.Adipiscing elit duis tristique sollicitudin nibh sit amet commodo. Luctus accumsan tortor posuere ac ut.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl rhoncus mattis.Maecenas pharetra convallis posuere morbi leo urna molestie. At in tellus integer feugiat scelerisque.Adipiscing elit duis tristique sollicitudin nibh sit amet commodo. Luctus accumsan tortor posuere ac ut.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl rhoncus mattis.Maecenas pharetra convallis posuere morbi leo urna molestie. At in tellus integer feugiat scelerisque.Adipiscing elit duis tristique sollicitudin nibh sit amet commodo. Luctus accumsan tortor posuere ac ut.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl rhoncus mattis.Maecenas pharetra convallis posuere morbi leo urna molestie. At in tellus integer feugiat scelerisque.Adipiscing elit duis tristique sollicitudin nibh sit amet commodo. Luctus accumsan tortor posuere ac ut.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl rhoncus mattis.Maecenas pharetra convallis posuere morbi leo urna molestie. At in tellus integer feugiat scelerisque.Adipiscing elit duis tristique sollicitudin nibh sit amet commodo. Luctus accumsan tortor posuere ac ut.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl rhoncus mattis.Maecenas pharetra convallis posuere morbi leo urna molestie. At in tellus integer feugiat scelerisque.Adipiscing elit duis tristique sollicitudin nibh sit amet commodo. Luctus accumsan tortor posuere ac ut.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Vitae sapien pellentesque habitant morbi tristique senectus et netus. Vitae proin sagittis nisl rhoncus mattis.Maecenas pharetra convallis posuere morbi leo urna molestie. At in tellus integer feugiat scelerisque.Adipiscing elit duis tristique sollicitudin nibh sit amet commodo. Luctus accumsan tortor posuere ac ut./div/div/div
/template练习渲染阶乘值
onMounted是vue的生命周期方法会在页面刷新的时候自动触发。
后端代码
import random
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddlewareapp FastAPI()app.add_middleware(CORSMiddleware,allow_origins[*],allow_credentialsTrue,allow_methods[*],allow_headers[*],
)def fac(n):if n 2:return ntotal 1for i in range(2, n 1):total * ireturn totalapp.get(/)
async def get_fac(n: int):return {results: fac(n)}if __name__ __main__:import uvicornuvicorn.run(app, host0.0.0.0, port8001)
前端代码
script setup
import {onMounted, ref} from vue;
import axios from axios;const n1 ref(10)
const n2 ref(9)
const n3 ref(8)
const n4 ref(7)
const n5 ref(6)
const n6 ref(5)onMounted((){axios({method: get,url:http://127.0.0.1:8001/?nn1.value}).then((res){console.log(res.data)console.log(res.data.results)n1.value res.data.results})axios({method: get,url:http://127.0.0.1:8001/?nn2.value}).then((res){console.log(res.data)console.log(res.data.results)n2.value res.data.results})axios({method: get,url:http://127.0.0.1:8001/?nn3.value}).then((res){console.log(res.data)console.log(res.data.results)n3.value res.data.results})axios({method: get,url:http://127.0.0.1:8001/?nn4.value}).then((res){console.log(res.data)console.log(res.data.results)n4.value res.data.results})axios({method: get,url:http://127.0.0.1:8001/?nn5.value}).then((res){console.log(res.data)console.log(res.data.results)n5.value res.data.results})axios({method: get,url:http://127.0.0.1:8001/?nn6.value}).then((res){console.log(res.data)console.log(res.data.results)n6.value res.data.results})
})/script
templatediv classflex flex-wrap justify-content-center stylemin-height: 200pxdiv classz-5 relative flex align-items-center justify-content-center p-4 bg-primary font-bold border-round shadow-1 stylewidth: 100px; height: 100px; left:125px{{ n1}}/divdiv classz-4 relative flex align-items-center justify-content-center p-4 bg-primary font-bold border-round shadow-1 stylewidth: 100px; height: 100px; left:100px; top:10px{{ n2}}/divdiv classz-3 relative flex align-items-center justify-content-center p-4 bg-primary font-bold border-round shadow-1 stylewidth: 100px; height: 100px; left:75px; top:20px{{ n3}}/divdiv classz-2 relative flex align-items-center justify-content-center p-4 bg-primary font-bold border-round shadow-1 stylewidth: 100px; height: 100px; left:50px; top:30px{{ n4}}/divdiv classz-1 relative flex align-items-center justify-content-center p-4 bg-primary font-bold border-round shadow-1 stylewidth: 100px; height: 100px; left:25px; top:40px{{ n5}}/divdiv classz-0 relative flex align-items-center justify-content-center p-4 bg-primary font-bold border-round shadow-1 stylewidth: 100px; height: 100px; top:50px{{ n6}}/div/div
/template渲染结果
使用循环优化前端代码
script setup
import {onMounted, ref} from vue;
import axios from axios;const n1 ref(10)
const n2 ref(9)
const n3 ref(8)
const n4 ref(7)
const n5 ref(6)
const n6 ref(5)onMounted(() {let arr [n1, n2, n3, n4, n5, n6]for (let n of arr){console.log(n, n.value)axios({method: get,url: http://127.0.0.1:8001/?n n.value}).then((res) {console.log(res.data)console.log(res.data.results)n.value res.data.results})}
})/script
templatediv classflex flex-wrap justify-content-center stylemin-height: 200pxdivclassz-5 relative flex align-items-center justify-content-center p-4 bg-primary font-bold border-round shadow-1stylewidth: 100px; height: 100px; left:125px{{ n1 }}/divdivclassz-4 relative flex align-items-center justify-content-center p-4 bg-primary font-bold border-round shadow-1stylewidth: 100px; height: 100px; left:100px; top:10px{{ n2 }}/divdivclassz-3 relative flex align-items-center justify-content-center p-4 bg-primary font-bold border-round shadow-1stylewidth: 100px; height: 100px; left:75px; top:20px{{ n3 }}/divdivclassz-2 relative flex align-items-center justify-content-center p-4 bg-primary font-bold border-round shadow-1stylewidth: 100px; height: 100px; left:50px; top:30px{{ n4 }}/divdivclassz-1 relative flex align-items-center justify-content-center p-4 bg-primary font-bold border-round shadow-1stylewidth: 100px; height: 100px; left:25px; top:40px{{ n5 }}/divdivclassz-0 relative flex align-items-center justify-content-center p-4 bg-primary font-bold border-round shadow-1stylewidth: 100px; height: 100px; top:50px{{ n6 }}/div/div
/template
